Issue with CSS drop down
- by user277314
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">
<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;
}
