Loading ...
How-to: DropDown CSS Menu
Announcement
I will update this article. Back in the days, this worked. In 2011, there are better ways, updated languages in HTML 5 + CSS 3 and many more options. Expect an article explaining this before 20 June.
Due a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS menu!
This CSS menu will have submenus and will use the web-techniques
Structure
Before we can start building an awesome design, we need to have structure. We will use HTML for that. The structure of our menu is based on a simple un-ordered list.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Search engine</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
The ul element is the begin and end of the un-ordered list, and the li elements are the menu-items In some of the li elements, you see another un-ordered list and these will be our drop-down submenu’s.
Make the menu Accessible
Accessibility is important. Not everyone is on the same computer with that same settings as you. Maybe they’ve disabled CSS, or any other thing that makes this menu not work.
We will add some titles to our menu items, so that when people roll over an item or visit the menu in a screenreader, they see the title popping up telling them what that item is about. Here is our more accessible structure.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
<ul id="nav">
<li><a title="Home" href="#">Home</a></li>
<li><a title="Services" href="#">Services</a>
<ul>
<li><a title="Services > Webdesign" href="#">Webdesign</a></li>
<li><a title="Services > Developement" href="#">Development</a></li>
<li><a title="Services > Illustration" href="#">Illustration</a></li>
<li><a title="Services > Search Engine" href="#">Search engine</a></li>
<li><a title="Services > WordPress" href="#">WordPress</a></li>
</ul>
</li><!-- end ul li -->
<li><a title="Blog" href="#">Blog</a>
<ul>
<li><a title="Blog > Themes" href="#">Themes</a></li>
<li><a title="Blog > Plugins" href="#">Plugins</a></li>
</ul>
</li><!-- end ul li -->
<li><a title="Contact" href="#">Contact</a></li>
</ul>To learn more about accessibility in a CSS menu, you should read my past tips regarding accessibility here.
This part of the menu should be clear. If not, you should consider learning the basics of HTML first, before you start on a CSS menu like this.
CSS for your menu
The style language CSS will add functionality to the menu and we will combine that later on with the bahavior file I mentioned earlier. I will start to give you the elements we need to style. If we forget one part of these, our menu might not have the functionality we require. More explanation follows below when we add the ‘core’ codes.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
ul#nav {} /* the structure of our head-menu */
li {} /* the structure of the first items */
ul#nav li a {} /* the links inside our first items */
ul#nav li a:hover {} /* the roll-over styles for the links in our first items */
ul#nav li ul {} /* first items > submenu structure */
ul li {} /* the structure of our submenu items */
li > ul {} /* extra styles for Internet Explorer (behavior file) */
li:hover ul, li.over ul {} /* to make things work in Internet Explorer (call for the behavior file) */Stripped Version
The codes that I will provide below are really necessary for the menu, it is the core of our menu. Delete any of these codes and your menu might not work. Here’s the demo; Stripped Version.
CSS
1 2 3 4 5 6 7 8 9
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}Everything clear here. List-style should be none if you would like to have no bullets or arrows in front of every item on the list. Padding and margin to zero: we can change that later and now we have full control of spacing.
CSS
1 2 3 4 5 6 7 8 9
li {
float: left;
position: relative;
width: 100px;
}Next in line are the list items. Float all our items to the left, position set to relative to make sure the submenu is displayed relatively to the first items.
CSS
1 2 3 4 5
ul#nav li a {
display: block;
}A user should be able to click on the whole menu item in order to get to the source. Therefore we need to transform the click-able area of the link the same width/height as the item itself. We do that with display:block;.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
margin-left:-1px;
}Display:none; for the submenu because the submenu shouldn’t display when we aren’t hovering the menu item. The submenu is positioned absolute, 0 pixels from the top, 0 pixels from the left and therefore he’s aligned just below our first-level menu.
CSS
1 2 3 4 5 6 7
li>ul {
top: auto;
left: auto;
}To reset the top and left attributes used in the ul#nav li ul{} we use this set of codes. It’s Internet Explorer causing the problem here. In li ul we have set those attributes to zero, but Firefox and other modern browsers need auto to do the job.
CSS
1 2 3 4 5
li:hover ul, li.over ul {
display: block;
}This is the part where the behavior file comes in. When we hover with our mouse over the first-level menu items, the display:block; makes sure the second-level menu pops up.
Next we will go through the behavior part.
Behavior file to add li:hover support
In the modern browsers, we simply add a :hover pseudo selector to a li element because that is supported. Unfortunately, we still have Internet Explorer 6 around and that’s a problem. IE6 doesn’t support :hover selectors on anything other then links. I have found a trick to add the extra functionality.
The work-around is a behavior file called “whatever:hover”. More information about the “whatever:hover” file can be found on the author’s website and you should have the actual file on your disk and in the same directory with your CSS file.
We can add this behavior file to our CSS with the following codes:
CSS
1
body { behavior:url(csshover.htc); }Current Item
Here is a little extra that might tweak up your CSS menu.
Sometimes it is a nice add-on to a CSS menu to change the style of one item a bit when you are on that source. For example, if you are on the Homepage, the Homepage menu item has a little difference in style and when we are on a Services page, it has a little difference in style. You get the point?
We do this by adding a new class to a menu item. When we want to style our Homepage item differently, here’s how we do that.
Change:
1
<li><a href="" title="Homepage">Homepage</a></li>To:
1
<li class="current"><a href="" title="Homepage">Homepage</a></li>With the CSS:
1
ul#nav li.current{ /* your styles */ }Why don’t we just style the class .current?
Because the CSS specificity of the normal list item (ul#nav li ) rules over .current and your ‘current’ item will not change. ul#nav li.current on the other hand will work. CSS specificity is one of the most hard parts of CSS and you can read a detailed article regarding CSS specificity here.
Time to hop in
We have worked our way into a horizontal CSS menu that works in both Internet Explorer 6, Firefox and all other modern browsers. It’s time to let your fantasy go and create a beautiful drop-down CSS menu yourself!
Today any good website builder should allow you to create an amazing drop-down CSS menu, it’s jut a matter of understanding the tools you have to work with.
Download & Demo
Of course, I couldn’t resist and gave it a shot as well and put it in the download too. You should visit the demos and download the sources. Enjoy!
DEMO: Stripped Version
DEMO: My Version
DOWNLOAD: horizontal-css-menu.rar
Custom Greeting Cards Printing Online at PsPrint.com
I will definitely give this a shot on some of the sites I own and run. Great article and it’s quite obvious you’ve received a lot of attention from it.
Thanks!
Great! I love CSS only menu’s
very interesting article well written man… http://www.consolemodz.com
good post! thank you very much
Great tutorial,thank you!!!
THANK YOU!!!! I was working on a site for a friend and he wanted to do this exactly and I looked all around the web and couldn’t find anything. Finally I found what i was looking for, bookmarked, thx!
Great everybody is liking it!
Thank you. i was looking for this.
Hi Stefan,
You are amazing. I am going to create 2 level categories with drop down feature.
I have tried various different scripts but each have some issues in various browsers OR they have big bunch of JavaScript code which harm to SEO.
You Code is really Search engine friendly code and working on all browser.
Thanks Man!!
Thanks for the compliment, appreciate it!
This is great! I jsut moved to wordpress and find it really fun to work on CSS. Your tutorial is so easy to follow.
Thanks and good job on your blog!
Your code blocks are absolutely beautiful. How did you do that?
The FV Code hightlighter from Frank Verhoeven will take care of it all.
very good work … I’ll use it on my own website
thanks
Anyone know if this code works in firefox 3 and Internet Explorer 7?
Thanks for this article Stefan, I was reading up on this one over the weekend. Maybe we could get our heads together at some point and develop an online menu creator tool? Looks like it would be simple enough…
Missed this comment. Too bad, we should have done that back in the day hehe
Just what I was looking for. Indepth tutorial allows anybody to easily add these to their site.
Thanks
@Web Design Sussex
“Maybe we could get our heads together at some point and develop an online menu creator tool?”
Let me know if you guys get together and do that, I would be very interested in using it! Post a reply if you do and ill be sure to check it out.
Thanks for the detailed tutorial .but when i created same code in my website pulldown doesnt work .could you suggest me for creating menu or give the entire code which i can learn and try once again.awaiting for your reply.
Thanking you.
Thank you for this lovely tutorial
Thanks for this one. I just use this on my site
Looks great!!! jQuery can do it better but still…awesome!
True, pretty old school way to solve this problem! Back in the day it was really awesome!
I think I should try this CSS tips for my new CuocThiSEO website. Thanks for your clear guide!
oh, awesom work I will implement it, thanks!
body {
behavior: url(csshover.htc);
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
}
behavior propery is not working in Visual studio 2005
That’s indeed possible, that technique is pretty old.
thanks. also works in ff3. that’s what I was looking for..
Thank you very much for the drop down menu css code. I will try it out and let you know if it worked for me.
thanks .. great help for me and my buddies..
I am really thankfull to you .. was looking for this all day long!
You are a great coder!
Thanks!
Thanks for the article, I will be implementing this in my next site. I have tried this on my own a few different times, but could never get the desired effects, your explination was great.
Thank you! Great to read this tutorial helps so much people.
[...] Source [...]
[...] 20. How to Create Dropdown CSS Menu [...]
If you take a look at my website you will see it is an array of web-pages tied together via links. I started it this way because I developed the content for each page slowly and rather than wait to get all the content I simply completed a page as I got the material. However, now I want to tie these pages together as one site and I don’t want to repeat the menu on each page. I’m certain I can code the menu once and put that URL on every page consequently reducing the code I will be required to type, I’m a pitiful typist. Can you tell me how to do this? I know it’s very simple but I’m fairly new to XHTML and CSS and I desperately need help.
Oh, your explanation and documentation of horizontal menus was excellent. I will be using it on my website, thanks.
Keith; thanks for your comment. That’s a problem simple HTML/CSS can not solve. You have to add a line of PHP code on the place where you want to place your menu:
< ?php include 'menu.html'; ?>
I hope that helps. Otherwise it might be interesting for you to take a look at WordPress. That does stuff like that automatically.
Thanks Stefan,
I appreciate your suggestion and I have already begun to play around with PHP 5 so, I will look into using it to rectify my problem.
[...] Drop Down CSS Menu [...]
This is extremely useful for a web design noob like myself
Just learning how go make menus. Your description of CSS is more lucid than anything else I’ve been able to find. Just about got it all except for how to remove the little circular bullets that appear by the sub-menu items in your example. I thought that the setting list-style to “none” was supposed to eliminate any bullets.
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}
Best,
Lee
Yeah, i could use some help to, on how to remove the bullet points?
Thanks for your question. Setting the list-type:none; helps, but I tend to do it with both classes (ul#nav + ul#nav li).
ul#nav{ list-type:none; }
ul#nav li{ list-type:none; }
Hope this helps. If not, try adding the !important; notice.
[...] Bullet Point Horizontal Menu Interesting horizontal menu including bullet points. [...]
Ouh Great!
I respect and love your work. peoples, like you have made the web world baby toy. Thanks, Keep it up.
http://960.gs/
this link may helpful for designers
Defenitely, we have a tutorial up about the 960.gs framework. Check it out! http://divitodesign.com/css/960-css-framework-learn-basics/
Any simple way to add icom/images instead of text ?
Webdesign”>Webdesign
You have to use background:url(images/your-icon.jpg) center left no-repeat; in your CSS. That way it might be possible.
I’ve implemented the menu successfully, but I’ve got an issue… The beneath the dropdown menu is a table containing an that I’m using to query data from an SQL database. The table is flush up against the bottom of the drop down menu; when I now hover over the options, they present themselves under the table, as if they were on separate layers.
Any thoughts?
I’m not too sure why the comment I just left didn’t present itself properly…
Here it is again:
I’ve implemented the menu successfully, but I’ve got an issue… Just beneath the dropdown menu is a table containing an asp:repeater that I’m using to query data from an SQL database. The table is flush against the bottom of the drop down menu; when I now hover over the menu options, they present themselves under the repeater, as if they were on separate layers.
Any thoughts?
Nevermind, I figured it out: setting a position along with a z-index is necessary for anyone that encounters the same issue…
If you’re noticing that your nav bar is popping below something else on your page (image, container, etc…) assign z-index values to each item (anywhere from -100 to +100). Know that item(s) with the higher index are going to appear above those with a lower one.
Cheers!
Great you already solved this. You could also check http://divitodesign.com/css/z-index-overlap-html-elements-with-css/
Is there a way to center the menu?
There is. The parent element (for example the
div.menu{ text-align:center; }
div.menu ul#nav{ text-align:left; width:1000px; margin:0 auto; }
The margin:0 auto; make sure the margin right and left is the same, so that makes it centered.
Hope that helps.
This is garbage, not working
Works fine on my site across all major browsers. I just had to make a few minor CSS tweaks to make it work with my previous navigtion bar and it’s perfect.
Thanks Stefan by the way.
Great you like it!