Dave Woods - Freelance Web Design Warwickshire

CSS Tabs Menu with Dropdowns

I’ve previously written a tutorial which demonstrated how to create accessible tab navigation menu’s. Within this tutorial, I’m going to explain how this menu can be expanded further to create dropdowns when the top level menu item is hovered over.

This article uses the Son of Suckerfish method for the dropdowns, as seen on HTML Dog
Source: Son of Suckerfish

If you haven’t yet seen the CSS tab menu tutorial then I’d suggest reading through that demo first as we’ll be using it as the basis for this menu.

CSS tabs menu tutorial

The HTML

The HTML is pretty straight forward and uses the same HTML as the previous example but now with sub-items added

<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a>
<ul>
<li><a href="#">My Qualifications</a></li>
<li><a href="#">My Personal Details</a></li>
</ul>
</li>
<li><a href="#"><span>Services</span></a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Links</span></a></li>
</ul>

That should be pretty straight forward and without any CSS applied it should simply render an unordered list which won’t be pretty but will still be perfectly usable and accessible.

The CSS

Ok, lets start by making sure we have the same navigation as in the CSS tabs tutorial so that we have the menu tabs generating correctly

* {
padding: 0;
margin: 0;
}
body {
font-size: 73%;
font-family: verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
overflow: auto;
}
#navigation li {
float: left;
list-style: none;
background-color: #666; /* to cater for users without images */
}
#navigation a {
display: block;
background-image: url(css-tabs/tabright.gif);
background-position: top right;
background-repeat: no-repeat;
color: #FFF;
text-decoration: none;
font-weight: bold;*/
}
#navigation span {
display: block;
background-image: url(css-tabs/tableft.gif);
background-repeat: no-repeat;
padding: 5px 15px;
}
#navigation a:hover {
background-position: right -198px;
}
#navigation a:hover span {
background-position: 0 -198px;
}

If you view this then it may look a little odd as we need to style the submenu items to work with this menu but you should at least see the hover on the top menu items working.

First, we’ll completely hide the submenu by positioning it 999em off to the left of the screen using absolute positioning. We’ll also style the list a little itself by providing a width, fontsize and a margin so that it’s styled as we want when it becomes visible again.

#navigation li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: 2px;
font-size: 90%;
}

Next, we need a little bit of code to style the link correctly and give the submenu items a hover state.

#navigation li ul a, #navigation li ul a:link {
background-image: none;
padding: 5px;
width: 10em;
background-color: #666;
}
#navigation li ul a:hover {
background-color: #333;
}

Finally, we snap the submenu back into place by apply left: auto; to the menu once the parent is hovered over. This resets the submenu to it’s default positioning instead of the -999em we used previously.

#navigation li:hover ul, #navigation li.sfhover ul {
left: auto;
}

Making IE play nicely

You may have noticed in the previous CSS that I didn’t explain why we need the following style #navigation li.sfhover ul. Internet Explorer 6 and below, only support hover on anchors and as we’re going to be needing to hover on the li element this menu won’t currently work in IE6 without a little JavaScript so this CSS style is used to apply the JavaScript (in the next step) to IE6.

The JavaScript

Include the following snippet of JavaScript code within your page and the menu will now work identically in IE6. This should be linked to in an external .js file but will work just as well if applied in the script tags.

sfHover = function() {
var sfEls = document.getElementById("navigation").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);

Summary

That’s really all there is to it. To ensure that the site is accessible in IE6 then you should also ensure that the top level links can take the user to a subpage in the site as any users of IE6 or below that have JavaScript disabled will not be able to activate the submenu’s.

However, this is hopefully only a temporary solution as Internet Explorer 6 gradually gets phased out in favour of more standards compliant browsers.

While IE6 still has a large user-base though, then it’s recommended that you do still support this browser to ensure that all your visitors have an equal experience on the site.

As always, please feel free to leave any comments or questions about this tutorial, or feel free to suggest future demonstrations.


66 comments on “CSS Tabs Menu with Dropdowns”

  4. Buck

    This is awesome! Thanks for the help. I have one question though. How would I implement an “on” image? like if I wanted the active tab to be another color? so everything would have 3 states, on, off, and hover.

    -Buck

  5. Dave Post author

    Quite easily. You’d need to apply an ID or class to the active item and then add another image to the two existing one’s and then simply adjust the background position for even further for the active tab.

    Hope that makes sense?

  6. Buck

    Yeah man, that worked, I just threw a class on the that is active. Thanks for the help! now to just fix my differences between ie and firfox (it’s not your tabs, its the rest of my page)…

    keep up the good work.

  8. Pingback: 50+ Nice Clean CSS Tab-Based Navigation Scripts

  10. Dave Post author

    It works fine in IE6… (and even IE5.5)

    Do you have JavaScript disabled in IE6 as that’s the only thing that might be preventing it from working for you.

  11. Matthew Stroh

    Dave, this is super great! The only thing that I’d like to see is for the tab you’re mousing over to stay light while you’re hovering over its children. Any way of getting that to stay active without nesting our anchor tags (like I’ve seen in other tutes like this).

    Thanks!

  12. Pingback: CSS Tabs - The Ultimate Tab Menus « Lorelle on WordPress

  13. Pingback: 20 More CSS based Navigation Menus For Your Projects | Social CMS Buzz

  15. Pingback: CSS ที่ใช้ทำNavigation Menus สำหรับแต่งเว็บไซต์ « Triple-S

  16. Ellora

    Hi

    Can provide the images used in this demo.
    2nd thing is the javascript. Can u plz publish the javascript needed to navigate from one tab to another.

    thanking u

    Ellora

  18. Pingback: bijusubhash.com » Blog Archive » CSS Tab-Based Navigation Scripts

  20. Gurdeep

    Sir can u please help me out in javascript. can u suggest anything book or site because i want to master in javascript

  22. Pingback: 30 Excellent CSS Based Navigation and Buttons Tutorial | instantShift

  23. Jayman Pandya

    Hi,

    Thank you for the awesome tutorial but i have a problem in the sub-menu items that the tab-images that are used in the background are repeated in the submenu instead of the color codes that i have given for the sub-menu items

    This is the problem only in IE6 – the bugger….. Also it refuses to work in Opera……

    You guidance on the same will be heartily appreciated.

    Thank You very much

    Regards

    Jayman

  24. Pingback: 100+ Massive CSS Toolbox | tripwire magazine

  25. idragon

    hey nice tutorial by the way i got the navigation menu that’s till the html i am new to this so can anyone tell me where should i put the css code

  26. psk

    New to HTML and CSS, so would like to thank you for your help on this. Was racking my head for so long, and i felt like a bit of a dumb ass sometimes…more of that to come in the future i bet…, cheers chief!

  28. Pingback: Nice Clean CSS Tab-Based Navigation Scripts « Online Free Applications Software Tips Tools Wallpapers

  29. Pingback: 50+ Nice Clean CSS Tab-Based Navigation Scripts | w3capps.info

  30. Pingback: 50+ Nice Clean CSS Tab-Based Navigation Scripts « Scripts Web

  32. Pingback: 56 CSS Tabs & Navigation Menu Scripts and Examples | TECHFLAPS

  35. Pingback: Free Resources to Help You Become a CSS Expert Designer, | guidesigner.net

  36. Pingback: 250+ Resources to Help You Become a CSS Expert | X Design Blog

  37. Pingback: 250+ Resources to Help You Become a CSS Expert | huibit05.com

  38. Pingback: 20+ Sumber yang akan membuat anda menjadi CSS Master « Webdesigner Resource

  39. Steve

    Hello Dave! Excellent Tutorial! But there is one thing I unable to apply: Right-Aligment! How align the tabs to the right of the screen/div/container what ever… Im able to do this with the subtabs but not with the main ones…

    Help me please!

    Thank you!

  40. Pingback: 50+ Nice Clean CSS Tab-Based Navigation Scripts | 9Tricks.Com - Tips - Tricks - Tutorials

  41. Jason Wood

    Hi Dave,
    Love your site!
    One question, could this be easily adapted to have different coloured tabs? i.e 1st tab blue with blue coloured dropdown, 2nd tab red with red dropdown etc..

    I tried to achieve this with another CSS dropdown menu but could not succeed.

    Thanks!

  42. Dave Post author

    Hi Jason,

    Yes you’d simply create the images in the colour that you want and then change the CSS of the dropdown to whatever you required 🙂

  43. Pingback: Become a CSS Expert, 250+ Resources | Amazing and Inspiring Design

  44. Jennifer

    Thanks so much for this tutorial. Been wanting to do this for a long time.

    Seemed to be working great for me until I put a slideshow underneath it. The page links that fall below the slideshow box underneath the nav area disappear.

    I tried to get the slideshow to go to the back and the nav area to come to the front, but it doesn’t work.

    Any suggestions?

    thanks-
    Jennifer

  45. Jennifer

    I should’ve said I tried to use the z-command to force it to the front, but no go. Maybe because I can’t use ‘absolute’ positioning?

    Thanks – I’m desperate.

  46. Dave Post author

    Hi Jennifer, I’ll need to see an example, would you be able to zip the complete site up or put it online somewhere for me to take a look please?

  47. Jennifer

    Hi Dave-

    Sure, I can do that. I’ve uploaded a test to here:
    http://familyphotoevent.com/test

    All of the content is not there yet – I am trying to get the structure set first.

    And now for some reason I can’t get the links to work right either. I’m not typing it in twice, but for some reason, the address is in there twice on some of the links. Only a few of them are active Gallery I, About, and Contact.

    But you can see what is happening on the home page with the drop down menu going behind the content.

    Many thanks for the help!

  48. Pingback: 50 den fazla css tab menü | FaydalıWeb | Internetin Faydalı Yüzü

  49. Dave Post author

    Hi Jennifer, the problem is most likely being caused with all those div’s and using absolute position on everything. You’d be much better using float’s and margin/padding to position things than rely on absolute positioning for everything which is causing this problem and will most likely cause you problems in the future.

  50. Pingback: 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets | tripwire magazine