CSS Forum

**mcook** · 01-27-2010, 12:45 PM

I have the following code for my navigation that is working fine that I want 2 of the list items to have drop down menus:

Code:

<div id="nav">
    
        <ul id="menu">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="about">About</a></li>
  <li><a href="#" class="projects">Projects</a></li>
  <li><a href="#" class="warranty">Warranty</a></li>
  <li><a href="#" class="resources">Resources</a></li>
   <li><a href="#" class="contact">Contact</a></li>
   <li><a href="#" class="sitemap">Sitemap</a></li>
</ul>
    </div>
    <!-- Nav div ends here -->

here is the css:

Code:

#nav {
    padding: 0px;
    height: 19px;
    width: 960px;
    right: 0px;
    bottom: 0px;
    position: relative;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
}
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 960px;
  height: 19px;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu .home {
    width: 65px;
    height: 19px;
    background-image: url(../images/nav/home.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 667px;
}
#menu .about {
    width: 99px;
    height: 19px;
    background-image: url(../images/nav/about.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 563px;
}
#menu .projects {
    width: 92px;
    height: 19px;
    background-image: url(../images/nav/projects.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 466px;
}
#menu .warranty {
    width: 137px;
    height: 19px;
    background-image: url(../images/nav/warranty.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 324px;
}
#menu .resources {
    width: 110px;
    height: 19px;
    background-image: url(../images/nav/resources.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 209px;
}
#menu .resources span {
    width: 173px;
    height: 23px;
    left: -180px;
    background-image: url(../images/nav/resources.png);
    background-repeat: no-repeat;
    bottom: 0px;
}

#menu .contact {
    width: 115px;
    height: 19px;
    background-image: url(../images/nav/contact.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 89px;
}
#menu .sitemap {
    width: 84px;
    height: 19px;
    background-image: url(../images/nav/sitemap.png);
    background-repeat: no-repeat;
    bottom: 0px;
    right: 0px;
}

Can show me how to make 2 of the list items drop down when you hover the mouse over them.

I am completely lost.

Thanks in advance!

**wongpk** · 03:20 PM

Which 2 are you talking about? Should be something like this:

HTML Code:

<div id="nav">
        <ul id="menu">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="about">About</a></li>
  <li><a href="#" class="projects">Projects</a></li>
  <li><a href="#" class="warranty">Warranty</a></li>
  <li><a href="#" class="resources">Resources</a></li>
   <li><a href="#" class="contact">Contact</a></li>
   <li><a href="#" class="sitemap">Sitemap</a>
<!-- Drop Down -->
<ul id="menu-drop">
  <li><a href="#" class="resources">Resources</a></li>
   <li><a href="#" class="contact">Contact</a></li>
</ul>
<!-- Drop Down -->
</li>
</ul>
    </div>
    <!-- Nav div ends here -->

CSS:
#menu li ul {display: none;}
#menu li {position: relative;}
#menu li:hover ul {display: block; position: absolute;}

Should be what you're looking for?