CSS 下拉菜单问题

Question

我的导航中的 css 下拉菜单有一个小问题。产品导航选项卡应该有下拉菜单。此外，导航工作正常，但子类别似乎无法正确显示。

这里是链接

这是我的导航代码：

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;
}