Issue with CSS drop down

Im having a little issue with the css drop down in my navigation. The products nav tab is suppose to have the drop down. Additionally, the nav works fine but it seems that the sub categories arent displaying correctly.

HERE IS LINK

Here is my navigation code:

HTML

<div id="nav">
    <ul id="navlist">
        &开发者_JAVA百科lt;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;
}

With just css you will need target the li on hover, not the div in it.

And for the containing ul to show up, you will have to change it´s left.

Something like:

li:hover ul {
    left: 0;
}