Drop down menus don’t have to be complicated… This tutorial 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: 0px 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: 0px 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;
}
Loading ...
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
May 31st, 2010 at 10:31 pm
***HELP PLEASE***
Can someone please help me with the code that Shane posted?
I am a website designer, but I am more proficient in using
HTML Code and CSS with Dreamweaver because it builds the code
for me.
I pasted the HTML Code and the CSS Code that Shane posted
on this site into 1 file on NOTE PAD and I saved the file
as .HTML
Then, I opened the file up in my IE browser and the menu did not work. I only see the bullet point list and the css code is visible.
The css styles were never applied to my html code.
Should I create a separate CSS code file and HTML file?
Do you think that this is my problem?
Also, is Shane’s CSS coded menu a “static menu”?
I read that search engines can read “static menus”
much better than java scripted menus and that is why
I need a “staic menu” for my website and luckily I
found Shane’s awesome tutorial. =)
I appreciate everyone’s help.
Thanks,
Tonya
June 1st, 2010 at 3:59 am
Hey Tonya,
In order for the CSS styles to work in this example you need to either use an embedded stylesheet or you can use an external one.
Here is an example of how to link the CSS styles to your HTML page.
http://www.w3schools.com/css/css_howto.asp
In my current example the menu is static because I hard coded the HTML meaning I wrote in what I wanted my menu items to be. It would be dynamic if it were used in something like wordpress and it added new menu items each time you added a page.
I hope this helps you out a little!
June 10th, 2010 at 6:08 pm
Hey Shane,
Great tutorial! I followed along and was testing everything in firefox. When I loaded the same page in ie 7 & then ie 8 today, the drop down didn’t work. Any idea what I might be missing? I saw someone else ask the same question and then they said they were just missing the transitional DTD. If I remember correctly DTD stands for document type definition, but I don’t know what that means =) Any help would be greatly appreciated.
June 14th, 2010 at 5:28 pm
Nevermind. I figured it out online… include this transitional DTD above tab for this code to work in IE 7 & 8.
June 15th, 2010 at 12:24 am
Hi Shane, this is Tonya again.
Thanks so much for your help. You are awesome!
I LOVE your helpful website about website designing!
Have a great day,
Sincerely yours,
Tonya in VA, near DC
July 19th, 2010 at 8:43 pm
Excellent video tutorial! I created my first drop down menu and customized it right along with your directions (pausing for adjustments of course). I was stuck on another tutorial’s drop down menu which was just so very complex with unnecessary css classes and id’s. Thank you very much indeed!
August 26th, 2010 at 9:24 am
Hi Shane,
Great tut. Thank you.
Just one question (probably a very obvious answer) I can’t seem to get the background to work for the top level (Home).
Where am i going wrong
*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 500px;
font-size:16px;
height:56px;
color:#3c2313;
}
#nav ul {
list-style-type: none;
font-size:16px;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
text-align: left;
text-decoration:none;
color:#3c2313;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
background:#3c2313;
}
#nav ul li:hover ul li a {
display:block;
background:#3c2313;
color:#ffffff;
width: 130px;
text-align: left;
font-size:12px;
/*border-bottom: 1px solid #3c2313;
border-right: none;*/
}
#nav ul li:hover ul li a:hover {
background:#ffffff;
color:#3c2313;
}
Cheers,
DsyD
August 26th, 2010 at 9:42 am
DOH!!!!
Solved it!!!