shorty876 0

How can I add drop down functionality to this nav bar code? Thank for any help!

HTML

<ul id="list-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
</ul>

CSS

/* NAV BAR */
ul#list-nav {
list-style:none;
margin:auto;
padding:0;
width:525px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#6600CC;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:#6633CC;
color:#000
}

2 answers

Carlos 60
0
points
This was chosen as the best answer

i actually made a post about this a while ago. it can be entirely done in CSS. the code if fairly simple and highly customizable.

This is the post i made

Here is a sample

By now i've simplified it a little more unfortunately I don't have any website running it.

I hope those links help you. Good Luck

Answered almost 3 years ago by Carlos
  • Nice very helpfull.. I dont know about thoose puke green colors though hahaa thanks though. — shorty876 almost 3 years ago
  • hahaha yes, i wouldn't use those colors in a real website either. Glad I could help! — Carlos almost 3 years ago
kainosnous 325
0
points

In a few words, the answer is to make a sub-list which is given the style "display: none" to hide it by default and then use the parent list item in the selector to give the child list the style "display: block" or "display: inline" depending on your layout. It just happens that a similar question was posted yesterday on this site: How to create a CSS and HTML drop down?. The upside is that the menu is always present so that even user agents without JavaScript or even CSS (and Googlebot) can read it too.

Answered almost 3 years ago by kainosnous