Проблема с раскрывающимся списком 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;
}