Many drop-down navigation solutions out there rely on javascript, but it is possible to set this up with CSS only, and this is the method I prefer. This works in all browsers, with a minor change in the way things look in IE7 and below.
HTML
<body id="about">
<div id="header">
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li class="about"><a href="#">About</a></li>
<li class="news"><a href="#">Newsletter</a>
<ul>
<li><a href="#">Issue 1</a></li>
<li><a href="#">Issue 2</a></li>
<li><a href="#">Issue 3</a></li>
</ul>
</li>
<li class="contact"><a href="#">Contact</a></li>
</ul><!-- nav -->
</div><!-- header -->
</body>CSS
#header {
min-width: 800px;
height: 150px;
}
#nav {
width: 100%;
background-color: #333;
font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;
float: left;
}
#nav li {
list-style: none;
float: left;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
}
#nav li a {
color: white;
text-decoration: none;
display: block;
}
#nav li a:hover {
background-color: #066;
}
#home .home a, #home .home a:hover,
#tutorials .tutorials a, #tutorials .tutorials a:hover,
#about .about a, #about .about a:hover,
#contact .contact a, #contact .contact a:hover,
#news .news a, #news .news a:hover {
background-color: #FFF;
color: #000;
cursor: default;
}
#nav li ul {
position: absolute;
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
float: none;
display: inline;
}
#nav li ul li a {
width: 118px;
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}Explanation
The HTML/CSS code is built upon the Simple Horizontal Menu Navigation post. See that post for details on the basics of the navigation. This explanation will only focus on the drop-down portion of the code. The new code is in bold above.
HTML
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>To set up the Drop Down portions of navigation in the menus, nest a second UL tag inside of the menu item’s LI tag. The code above shows this done for the Tutorials section. Nested unordered lists can be added for all the menu items if appropriate.
CSS
#nav li ul {
position: absolute;
display: none;
}This hides the display of the nested navigation, so it will only show when the user hovers over the parent link. The absolute positioning allows us to determine where the drop-down menu is displayed.
#nav li:hover ul {
display: block;
}When the user hovers over the parent LI tag, the nested menu will now display.
The rest of the CSS is mostly for styling the menus.
Browser Support
This will work in all browsers, even Internet Explorer 6. In IE6 and IE7, however, the drop-down menus are shifted over to the right a bit. If you want the menus to look exactly the same, you will need to add some additional styling for IE7 and lower with a browser specific style sheet.
i am looking for this kind of tutorial for long. A very detail tutorial explaining the code. thanks very much.
This is the same Nav code I use for my website but it does not work in Internet Explorer. I’ve tried mine & yours and neither work on my mac IE or windows IE.
Have you had any problems since this post?
Cheer,
Cher
It does work for me in IE. Right now I have IE9, but I remember testing in IE8 before I posted.
What exactly is happening when you run this in IE.
I just tested a few computers in my office. It definitely works in IE9 here as well, but not in the older version of IE. In IE6 the drop downs do not appear at all – you only see the main menu.
Now I know I can tell people to either upgrade their IE or just not use it like most of the population. Google Chrome is such a better brower.
I have found codes that do work in IE6 and after looking at them for a while I can’t pin point what makes them work and not mine. ??