0
나는이 하나에 난처함을 말해야합니다! 나는 (내가 간단하게 부르는) ul 기반 다중 레벨 드롭 다운 메뉴를 가지고있다. Firefox, Opera, Chrome, Safari 등에서 완벽하게 작동하지만 두 번째 수준의 메뉴 (예 : 상위> 하위> 하위)는 모든 IE 브라우저에서 표시되지 않습니다. 나에게는 메뉴 항목의 두 번째 레벨이 숨겨져있는 것처럼 보입니다. 거의 오버플로 할 수없는 것처럼 숨겨져 있습니까? 여기다단계 ul 기반 드롭 다운 CSS 위치가 모든 IE 브라우저에서 작동하지 않음
<ul>
<li> <a href="#">Diamonds</a>
<ul>
<li><a href="diamond-search.php" title="Diamond Search">Search</a></li>
<li><a href="#">Education</a></li>
<li>
<a href="#">Rings</a>
<ul>
<li><a href="#">Solitaire</a></li>
<li><a href="#">3 Stone</a></li>
<li><a href="#">Eternity</a></li>
<li><a href="#">Dress Rings</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Earings</a>
<ul>
<li><a href="#">Studs</a></li>
<li><a href="#">Hoops</a></li>
<li><a href="#">Other Earings</a></li>
</ul>
</li>
<li>
<a href="#">Pendants</a>
<ul>
<li><a href="#">Solitaire Pendants</a></li>
<li><a href="#">Other Necklaces</a></li>
</ul>
</li>
<li>
<a href="#">Braceletes</a>
<ul>
<li><a href="#">Tennis Bracelets</a></li>
<li><a href="#">Other Bracelets</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Rings</a>
<ul>
<li><a href="#">Bridal</a></li>
<li><a href="#">Eternity/Anniversary</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Sapphire</a></li>
<li><a href="#">Tanzanite</a></li>
<li><a href="#">Design a Ring</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Jewellery</a>
<ul>
<li>
<a href="#">Earings</a>
<ul>
<li><a href="#">Children</a></li>
<li><a href="#">Creoles</a></li>
<li><a href="#">Diamond</a></li>
<li><a href="#">Fashion/Pearls</a></li>
<li><a href="#">Hoops</a></li>
<li><a href="#">Huggies</a></li>
<li><a href="#">Sapphires</a></li>
<li><a href="#">Studs</a></li>
<li><a href="#">Tanzanite</a></li>
<li><a href="#">Gold</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Necklaces</a>
<ul>
<li><a href="#">Classic</a></li>
<li><a href="#">Fancy</a></li>
<li><a href="#">Special</a></li>
</ul>
</li>
<li>
<a href="#">Bracelets</a>
<ul>
<li><a href="#">Charm</a></li>
<li><a href="#">Children</a></li>
<li><a href="#">Classic/Fancy</a></li>
<li><a href="#">Identity</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Pendants</a>
<ul>
<li><a href="#">Children</a></li>
<li><a href="#">Cross Pendant on Chain</a></li>
<li><a href="#">Diamond/Gemstone</a></li>
<li><a href="#">Pendant on Chain</a></li>
<li><a href="#">Solitaire</a></li>
<li><a href="#">Gemstones</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Pearls</a>
<ul>
<li><a href="#">Rings</a></li>
<li><a href="#">Strands & Pendants</a></li>
<li><a href="#">Earrings</a></li>
</ul>
</li>
<li>
<a href="#">Gents</a>
<ul>
<li><a href="#">Bracelets</a></li>
<li><a href="#">Chains</a></li>
<li><a href="#">Pendant on Chain</a></li>
<li><a href="#">Rings</a></li>
<li><a href="#">Titanium</a></li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Chains</a>
<ul>
<li><a href="#">Handmade</a></li>
<li><a href="#">Gents</a></li>
<li><a href="#">Ladies</a></li>
</ul>
</li>
<li><a href="#">Specials</a></li>
</ul>
</li>
<li>
<a href="#">Watches</a>
<ul>
<li><a href="#">Casio</a></li>
<li><a href="#">Seiko</a></li>
<li><a href="#">Citizen</a></li>
<li><a href="#">Police</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">View all Brands</a></li>
<li><a href="#">Sunglasses & Accessories</a></li>
</ul>
</li>
<li>
<a href="#">Education</a>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Diamond Guide</a></li>
<li><a href="#">Ring Size Guide</a></li>
<li><a href="#">Watch Guide</a></li>
<li><a href="#">Precious Metal guide</a></li>
<li><a href="#">Necklace Guide</a></li>
<li><a href="#">Gemstone Guide</a></li>
</ul>
</li>
<li>
<a href="#">About us</a>
<ul>
<li><a href="#">Manufacture</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">History</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>
그리고 내 CSS 서식입니다 : 여기
메뉴 구조.nav{
background:#9c9a9b;
margin-top:3px;
margin-bottom:3px;
z-index:1;
}
.nav ul{position:relative;z-index:300;}
.nav ul, .nav li{
margin:0;
pading:0;
list-style:none;
}
.nav li{
float:left;
clear:none;
}
.nav a{
position:relative;
display:block;
float:left;
clear:both;
padding:3px 10px 3px 10px;
margin:0 1px 0 0;
text-decoration:none;
font-size:1.3em;
font-weight:bold;
font-family:"Times New Roman", Times, serif;
color:#fff;
background:url(../images/img_navtile.png) center left repeat-x;
}
.nav ul li{
position:relative;
float:left;
}
.nav ul li ul{
display:none;
position:absolute;
left:0;
width:175px;
margin:36px 0 0 0;
background:url(../images/img_dropdown-tile.png) top left repeat-x #b9cdf5;
z-index:0;
}
.nav ul ul li{
position:relative;
z-index:55;
width:175px;
}
.nav ul ul li ul{
position:absolute;
left:175px;
top:-36px;
width:175px;
margin:36px 0 0 0;
background:url(../images/img_dropdown-tile.png) top left repeat-x #b9cdf5;
}
.nav ul ul a, .nav ul ul a:hover{
color:#fff;
font-size:1.1em;
font-weight:normal;
font-family:Georgia, "Times New Roman", Times, serif;
background:none;
width:155px;
}
.nav ul ul li a:hover{
background:#1B3D65;
}
.nav a:hover{
background:url(../images/img_navtile-over.png) center left repeat-x;
}
등 호버 이벤트가 jQuery를 처리하는과 내가이 문제가 의심한다. 나는 이걸로 회색 털이 자라면서 어떤 도움이라도 대단히 감사 할 것입니다!
데모를 게시 할 수 있습니까? HTML은 괜찮아 보인다 - 당신은 하나의 d를 놓친 CSS에서 패딩 오타가 있습니다. – easwee
답장을 보내 주셔서 감사합니다. http://simonwebfactory.office-on-the.net:8075 username guest와 password guest에서 전체 데모를 볼 수 있습니다. – SimonDowdles