CSS下拉問題

Question

我的導航中存在一個小小的CSS問題。產品導航標籤假設有下拉。此外，導航工作正常，但似乎不能正確顯示子類別。

HERE IS LINK

這裏是我的導航代碼：

HTML

<div id="nav"> 
    <ul id="navlist"> 
     <li><a href="home.html" id="nav-home">Home</a></li> 
     <li><a href="company.html" id="nav-company">company</a></li> 
     <li><a href="benefits.html" id="nav-benefits">benefits</a></li> 
     <li><div id="nav-products2">Products</div> 
      <ul> 
       <li><a href="food.html" id="nav-food-serv">Food Processing Services</a></li> 
       <li><a href="vehicle.html" id="nav-vehicle-serv">Vehicle Services</a></li> 
       <li><a href="auto.html" id="nav-auto-serv">Automotive Services</a></li> 
       <li><a href="laundry.html" id="nav-laundry-serv">Automotive Services</a></li> 
      </ul> 
     </li> 
     <li><a href="laboratories.html" id="nav-labs">laboratories</a></li> 
     <li><a href="industries.html" id="nav-industries">industries</a></li> 
     <li><a href="contact.html" id="nav-contact">contact</a></li> 
    </ul> 
</div> 

CSS

#nav { 
float:left; 
width:1002px; 
height:42px; 
} 
#navlist { 
list-style: none; 
list-style-position:outside; 
list-style-type: none; 
} 
#navlist li{ 
float:left; 
} 
#navlist li a { 
display: block; 
height: 42px; 
overflow: hidden; 
background-position: top left; 
background-repeat: no-repeat; 
text-indent: -999em; 
} 
#navlist li a:hover { 
background-position: bottom left; 
} 
#navlist li .current {background-position: bottom left;} 

/* NAV SPECIFICS */ 
#nav-home {width: 129px; background-image: url(../images/nav/home.jpg);} 
#nav-company {width: 161px; background-image: url(../images/nav/company.jpg);} 
#nav-benefits {width: 133px; background-image: url(../images/nav/benefits.jpg);} 
#nav-products {width: 112px; background-image: url(../images/nav/products.jpg);} 
#nav-labs {width: 137px; background-image: url(../images/nav/laboratories.jpg);} 
#nav-industries {width: 169px; background-image: url(../images/nav/industries.jpg);} 
#nav-contact {width: 161px; background-image: url(../images/nav/contact.jpg);} 

#nav-food-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} 
#nav-vehicle-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} 
#nav-auto-serv {width: 161px; background-image: url(../images/nav/nav/sub.jpg);} 
#nav-laundry-serv {width: 161px; background-image: url(../images/nav/sub.jpg);} 
#nav-products2 {width: 112px; background-image: url(../images /nav/products.jpg);height: 42px; overflow: hidden; background-position: top left; background-repeat: no-repeat;text-indent: -999em;} 
#nav-products2:hover {background-position: bottom left;} 

#navlist li ul { /* second-level lists */ 
position: absolute; 
z-index:10; 
list-style:none; 
display: block; 
background: #000; 
width: 161px; 
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ 
margin:0; 
padding:0; 
border-left:1px solid #a58545; 
border-right:1px solid #a58545; 
} 
#navlist li ul li { 
list-style:none; 
display: block; 
clear:left; 
width:100%; 
} 
#navlist li ul li a { 
display:block; 
overflow: hidden; 
height:42px; 
background-position: top left; 
background-repeat: no-repeat; 
text-indent: -999em; 
margin:0; 
background-color:0; 
padding:0; 
width: 161px; 
} 
#navlist li ul li a:hover { 
background-position: bottom left; 
} 

Answer 1

只需CSS，你需要針對li上懸停，而不是div在裏面。

而對於包含ul顯示，你將不得不改變它的left。

喜歡的東西：

li:hover ul { 
    left: 0; 
}