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 13th, 2010 at 7:51 am
awesome tutorial, easy to follow, especially for newbie in css like me… Thanx a lot Sir ^^
NoskiLL1343´s last blog ..Tutorial Make Photoshop Brush
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!!!
September 8th, 2010 at 3:33 am
Hello, I would like my nav menu to look like it currently does on the homepage http://thempowergroup.com/, but when I attempt to do the CSS drop down nav this is what I’m getting:
http://thempowergroup.com/index_test.html
I’ve tried many different tutorials and get the same results. Any ideas? Thanks!
November 19th, 2010 at 10:09 pm
Great tutorial. Very helpful! Now, is there a way to make the drop-down only show when clicked? Without using Javascript?
January 15th, 2011 at 7:10 am
how about creating one using htm dom? can anybody explain this code
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
what's the meaning of this line this.className = this.className.replace(new RegExp("sfhover\\b"),"");
January 15th, 2011 at 7:34 am
shane, can you create a multi-leveled dropdown menu!!
April 12th, 2011 at 3:50 pm
Well everything seems to be working fine, except in IE7&8.
I am using Dreamweaver CS5 and have the following doc type:
The problem I am running into is the hover that is applied to the second is displaying horizontal instead of vertical.
Also, I want my navigation bar to be off to the right, but every time I apply :
#nav{
font-family:Arial, Helvetica, sans-serif;
position:relative;
width:425px;
height:56px;
font-size:14px;
color:#999;
margin:0px auto;
float: right; /*here is float*/
}
The line #navcon{background:#fffff; width 100%;} gets negated and the body{background:#_____} fills the whole page
I have tried numerous times to fix it, but I can’t seem to figure these out!! >_<
If anyone has a fix I could really use the help.
THANKS EVERYONE
May 3rd, 2011 at 1:50 am
i was searching the net for such type of tutorial and after hundreds of search i came by yours. Believe me there was no tutorial as easy and self explanatory as this. It was just so easy to understand in this. Thanks a lot…….:)
May 25th, 2011 at 9:15 pm
Great tutorial. It was a perfect refresher for menu’s, it’s been awhile for me.
thanks again,
Nick
June 9th, 2011 at 7:21 pm
Check out a totally free dropdown menu with no javascript. Easy to use.
Caputo Designz´s last blog ..Pure CSS Navigation Menu with rounded dropdowns
June 16th, 2011 at 9:27 pm
How do I add another level to this…..great tutorial by the way…I need multi level….Please Help me….
June 29th, 2011 at 10:40 am
Thanks for a great tutorial, makes it so much easier to follow than plain text!
July 24th, 2011 at 6:04 pm
Hi
I’m having the same problem as Blaine. I’ve added the Transitional DTD but the drop down still stacks across the page instead of vertical. It works in FireFox and Chrome but not in IE 7 & 8. Can anyone help?
Thanks in advance.
Kate
July 24th, 2011 at 6:31 pm
Hi
I’ve just figured it out. To get the menu to drop down vertical in IE 7 & 8 add this code.
#menu li li{
float: none;
}
enjoy
August 9th, 2011 at 7:48 pm
wrestled with this for about 45 mins. Only one of my drop down navs displaying properly the other 2 links were displaying the drop down horizontal in IE 7 & 8
adding this code worked
#nav ul li li {
float: none;
}
August 14th, 2011 at 10:18 am
Nice, simple and a better tutorial… also it would be great if you included icon image too in the menus.
September 20th, 2011 at 3:07 am
Firstly, you are a born teacher. The level of details is just right and your voice is great for teaching! I learnt a lot from this tutorial and really feel that I understand it. But when I do this in IE9 the pull down menu doesn’t work. Is there something I don’t know? Thanks so much for your help. I REALLY appreciate it.
September 28th, 2011 at 6:31 pm
hello shane..!!
your tutorial really impressed me. I wld have gone mad searching for such tutorial. Could we have some more new and amazing styles…to learn 4m u ??
November 21st, 2011 at 10:19 pm
Hey man,
Thank you so much, you explained so nicely, and even the code
May luck be with you!
Best regards
Srdjan