Drop down menus don’t have to be complicated… This tutorial by www.plainshanedesign.com shows just how easy it is to create a stylish drop down menu using only CSS.
First, let’s start off with the HTML that is necessary for the drop down menu. Start by creating a wrapping div. I called this #nav in this example. We are going to create our drop down menu with unordered lists. As you can see in the code below we have a standard unordered list that houses all of our navigation. Now, the main navigation items are Home, About Me, Portfolio, and Contact. The drop down items are Web, Print, and Photos. Take a look at the list item where portfolio is, I bolded it so you could see it better. Notice that the closing </li> is further down in the code (this tag is also bolded). We are putting another unordered list inside of the LI that has portfolio in it (The second unordered list is blue). This second unordered list will be the drop down menu when someone hovers over portfolio.
The HTML
<div id=”nav”>
<ul>
<li class=”first”><a href=”#”>Home</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Portfolio</a>
<ul>
<li><a href=”#”>Web</a></li>
<li><a href=”#”>Print</a></li>
<li><a href=”#”>Photos</a></li>
</ul>
</li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div>
Ok that is it for the HTML on to the CSS
The CSS
First we setup the #nav div. Give it a width and height and a font size. It may take some small adjustments to the width and the height if you change the font-size value, so just be aware of that. The next line of code you see which is affecting the #nav ul, is used to get rid of the bullets. Since we put our navigation in a list by default it has bullets, so list-style-type: none, takes care of that.
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
This piece of code is what makes our navigation. If you leave out the float: left here the navigation would still be vertical. DO NOT FORGET to position this relative, because our drop down items will be absolute and will feed of this relative position
#nav ul li {
float: left
position: relative;
}
These styles are for the anchor tag that is inside of each of the lists. We need to use display block in order for the clickable area to be whole button and not just the text. We align the text center for style purposes. We also give each item a border right to have a nice separator in between. *You may be asking well the first list item needs a border left to complete it don’t worry we will come back to this later*
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
The Important Part
These two are the most important part of this tutorial. These give our menu the drop down functionality that we are looking for. As you can see we are inside of our nav div, then inside the first unordered list, then inside the li, THEN INSIDE OUR SECOND unordered list. I know that might seem like a lot but just follow the trail. We tell it to display none because we do not want it to show up until the first unordered list is hovered over.
The second part is saying when the user hovers over the LI of the first unordered list, which is our Home, About Me etc.. buttons then display the second unordered list which are Web, Print, and Photos. We also position it absolute so that it stays in place right under our first list.
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
These are the styles for the hover states of the second unordered list. I gave it a teal color but you can change that to whatever you like.
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
The Complete CSS
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
CSS Drop Down Menu Tutorial – Plain Shane Design
August 10th, 2009 at 8:15 pm
This was an excellent tutorial and extremely easy to follow. I will definitely be visiting again to read similar tutorials and other posts on this site. You can count on a recommendation from me to all my fellow web designers!
August 11th, 2009 at 3:07 pm
Shane nailed it with this tutorial. The pacing of the video, the easy to understand concepts and the laymen way Shane explains how nested attributes work when setting up the hove effects is perfect.
Has to be the best CSS drop down menu tutorial on the net.
September 15th, 2009 at 10:59 pm
Maybe I just copied the code wrong or something but the drop down part of the menu doesn’t seem to be working in IE8
September 16th, 2009 at 6:05 pm
Nevermind
I simply forgot to put in the transitional DTD
November 4th, 2009 at 8:53 pm
Good job on the tutorial! One thing worth noting is that ie6 doesn’t support the li:hover selector, so if you’re designing for ie6 you’ll need to add some javascript to add a class to the li being hovered. For example, if i add the class “hover” to the li, I would change the last three entries of my CSS to:
#nav ul li:hover ul, #nav ul li.hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a, #nav ul li.hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover, #nav ul li.hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
Cheers!
December 1st, 2009 at 4:55 pm
I lost my first job because I couldn’t explain him the navbar using dreamwaver. I should have read this article long ago before entering for my interview.
Apple App Tips´s last blog ..10 Top Apple Iphone Shortcut Tips Tricks : Iphone Shortcut Tips
January 18th, 2010 at 8:14 pm
Nice tutorial! but you should avoid asterisk prefix usage to reset all selector’s properties as it will result in unexpected behavior, see this http://www.webdevout.net/css-hacks#unrecommended-asterisk_prefix.
If you want to reset all properties, may be you should try this technique, http://meyerweb.com/eric/tools/css/reset/.
Van´s last blog ..Got you:| Blog Pak RW moved in here
February 22nd, 2010 at 11:07 am
Does exactly what it says on the tin but doesn’t work in ie6, or is it just me it’s not working for? Works in everything else for me though, but ie6 is the biggy, even if it means using jQuery, is it possible with this css?
I’m deperately trying to find a simple, lightweight, css only (or minimum jQuery) horizontal drop down menu, and it’s not easy!
Tjobbe´s last blog ..I wrote a guide about @font-face