Issue with CSS drop down

Posted by user277314 on Stack Overflow See other posts from Stack Overflow or by user277314
Published on 2010-04-08T18:35:54Z Indexed on 2010/04/08 18:53 UTC
Read the original article Hit count: 443

Filed under:
|
|
|

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

© Stack Overflow or respective owner

Related posts about css

Related posts about html