Talk to me about anything. If you’d like to work with me, or
even if you just need a hug, I’ll get back to you shortly.

Please enter your name

Please enter a valid e-mail

It's cold!

Say something!

CSS Navigation Rollovers With Drop-downs

This post is a continuation of Super Fantastic CSS Navigation Image Rollovers where we created CSS rollovers with a single image, so it would probably be a good idea for you to take a look at that post in order to follow along with this one if you haven’t done so yet. We’re going to take the code from that post, and adapt it to Stu Nicholls’ CSS drop-downs. He has done a great job in creating a multi-level drop-down menu that is verified to work in most browsers, and without any slow loading javascript.

Sorry there has been such a delay between these two posts, I’ve been out sick with a nasty cold for a while. I decided that I can finally breath through my nose well enough to finish this thing.

Here is an example of what we’ll be creating. You can find all of the necessary CSS in the header of that page. Keep in mind, I also use Meyer’s Reset CSS sheet which takes care of getting rid of the unordered list’s natural padding and styling. CSS reset style sheets are great for evening the playing field across multiple browsers, because they all have their own styles that they apply to certain elements and they’re never the same.

We’ve already got our image for the navigation rollovers from the previous post, and so now we’re going to introduce the second level of navigation into our HTML:

<div id="navigation">
    <ul>

        <li><a href="index.php" class="link1">Home</a></li>
        <li><a href="metal" class="drop link2">Metal<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="gold.php">Gold</a></li>
                <li><a href="aluminum.php">Aluminum</a></li>
                <li><a href="brass.php">Brass</a></li>

                <li><a href="stainless-steel.php">Stainless Steel</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="plastic" class="drop link3">Plastic<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="polyethelene.php">Polyethelene</a></li>

    
                <li><a href="polycarbonate.php">Polycarbonate</a></li>
                <li><a href="fiberglass.php">Fiberglass</a></li>
                <li><a href="pvc.php">PVC</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="services.php" class="drop link4">Services<!--[if IE 7]><!--></a><!--<![endif]-->

    
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul style="height:240px;top:-40px;">
                <li><a href="art.php">Art</a></li>
                <li><a href="design-for-manufacturing.php">Design For Manufacturing</a></li>
                <li><a href="prototyping.php">Prototyping</a></li>
                <li><a href="quickturn.php">Quickturn</a></li>
                <li><a href="safety-design.php">Safety Design</a></li>

                <li><a href="kits-and-assembly.php">Kits &amp; Assembly</a></li>
                <li><a href="rfq.php">Request For Quote</a></li>
    
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="news.php" class="link5">News</a></li>

        <li><a href="catalog.php" class="link6">Catalog</a></li>
        <li><a href="about.php" class="link7">About Us</a></li>
        <li><a href="contact.php" class="link8">Contact</a></li> 
        <li><a href="users.php" class="link9">Registered Users</a></li>
    </ul>
</div>

We’re creating 3 dropdowns that come out of the links Metal, Plastic, and Services. We haven’t made too many changes to our HTML from the previous post. The #navigation ID has been moved off of the ul and onto the containing div because of the way that Stu Nichols did many of his selectors in his drop-down. Also, please take note of the way that the Internet Explorer conditional comments have been structured in this. You don’t want to screw those up, or IE will render things ugly the way that it normally does!

That was the easy part, and now for the CSS which I will just break down line for line. Once again, you can get the whole thing at this link.

Most of this code is just styling that will be specific for the navigation for every link , and there are some old IE hacks in here as well. Make sure you just replace the code that you need, and put your width in all of the right places:

#navigation {width:145px;position:relative; z-index:100;margin-top:50px; border-right:1px solid #999; padding:10px 0px; float:left;}
/* hack to correct IE5.5 faulty box model */
* html #navigation {width:145px; width:144px;}
/* float the list to make it horizontal and a relative positon so that you
can control the dropdown menu positon */
#navigation li {width:145px;position:relative;}
/* style the links for the top level */
#navigation a, #navigation a:visited {display:block; height:47px;
background:url(navigation.png) top left; text-indent:-9000px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #navigation a, * html #navigation a:visited {width:145px;width:145px;}

Just follow the CSS comments that Stu Nichols has placed in his code here. We’re still not doing any huge alterations other than styling things specific to this drop-down. For our purposes we’re only doing one sub-level, but I left the CSS in here for you to style a third one if needed:

/* style the second level background */
#navigation ul ul a.drop, #navigation ul ul a.drop:visited {
	background:#2d3d47}
/* style the second level hover */
#navigation ul ul a.drop:hover{background:#fff; color:#202c32;}
#navigation ul ul :hover &gt; a.drop {background:#fff; color:#202c32;}
/* style the third level background */
#navigation ul ul ul a, #navigation ul ul ul a:visited {
	background:#e2dfa8;}
/* style the third level hover */
#navigation ul ul ul a:hover {background:#b2ab9b;}

This is where you figure out your exact positioning of the sub-levels, as well as style their appearance. Once again, the extra sub-level code is left in here and unaltered, just make sure that you are going down each line and putting in the code that is specific for your design:

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navigation ul ul {
	visibility:hidden;
	position:absolute;
	top:-10px; left:145px;
	padding:4px;
	background:#2d3d47;
	height:96px; width:145px;
	border-left:1px solid #999;
	}
/* another hack for IE5.5 */
* html #navigation ul ul {top:-9px;top:-10px;}

/* position the third level flyout menu */
#navigation ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
#navigation ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navigation table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
#navigation ul ul a, #navigation ul ul a:visited {
	background:#2d3d47;
	color:#fff;
	height:auto;
	line-height:14px;
	text-indent:0px;
	display:block;
	padding:5px;
	text-decoration:none;
	font-size:11px;
	}
/* yet another hack for IE5.5 */
* html #navigation ul ul a, * html #navigation ul ul a:visited {
	width:145px;width:145px;}

This is where we put in a lot of our code for doing the image rollover. This part is a little tricky, because I found an interesting IE6 quirk that stumped me for a while and I still haven’t quite been able to make sense out of it. You’ll see what I’m talking about by the consolidation comment on the first sub-level drop-down. Our background position code from the last post is largely unchanged except for when we have a drop-down on links 2, 3, and 4. We now have the selector #navigation :hover > a.link2, #navigation ul ul :hover > a.link2 which is telling the image rollover to stay in its hover state while the user is browsing through the sub-levels:

/* style the top level hover */
#navigation :hover &gt; a, #navigation ul ul :hover &gt; a {
	background:url(navigation.png) top left;}

/* top level image background placements */
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
/* DO NOT consolodate next 2 lines into one, this breaks IE6 */
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation :hover &gt; a.link2, #navigation ul ul :hover &gt; a.link2  {
	background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation :hover &gt; a.link3, #navigation ul ul :hover &gt; a.link3  {
	background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation :hover &gt; a.link4, #navigation ul ul :hover &gt; a.link4  {
	background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}

The rest of the code is just a little extra styling. We now have a fast drop-down menu with image roll-overs using nothing more than CSS! Again, you can view the code for our final result here. If you have any tips, questions or problems that you run into while trying to reproduce this, please leave a comment.

Advertisement: Choose from a wide array of bracelets available in store for you today. LusterForever jewelers has a wealth of designs that fits your discriminating taste. See for yourself.

35 Comments
  1. Swizec says:

    Hate to sound round but errm … there’s a different way of doing this?

    Sorry, guess I’ve just been a webdev for too long. Mind if I also say that I was very astonished about this technique when I first heard of it and so I’m sure a lot of readers will appreciate it. In fact, let me tweet about it, am sure my followers will appreciate the link.

  2. Joren Rapini says:

    @Swizac

    That’s the beauty of coding, there is always a million ways to accomplish one goal. This is my favorite way of doing it with nothing but CSS. Javscript drop-downs/rollovers are great if you honestly need the added flashiness of it, but a CSS drop-down is so much quicker and usable. If you like using a different method, I’m all ears! Thanks for the shout out on your Twitter.

  3. ion says:

    anyway your rollover for this site is a junk – learn photoshop

  4. Joren Rapini says:

    @ion, Learn photoshop? Can you justify that or are you just a professional trolling e-thug?

    You caught me red-handed though, I really have no idea how to use photoshop. I designed this whole website with MS Paint.

  5. Anthony Bruno says:

    Dear Ion,

    Cool kids design interfaces in Adobe Fireworks, get with it.

    xoxo,
    Anthony Bruno

    ps. Thanks for the awesome article Joren!

  6. Very detailed explanation, well done. As far as your last post….we actually have a competition at our office for fun to see who can design the best interface using only MS Paint haha.

  7. Tom says:

    Actually, the most professional web designers/developers draw their website on a sheet of notebook paper, scan it and post the jpg and use image maps for navigation…

    Joren – learn scandev already and get with the program.

    (obvious sarchasm – great post man!)

  8. Joren Rapini says:

    Thanks guys. One of the devs at my office likes the idea of the MSPaint contest. He feels that he’d finally have a chance against the rest of us ;)

  9. Joaquim says:

    Impressive with designing a web site (graphics and layout) in Microsoft Paint. I agree that CSS is the better way to go for designing interactive menus for accessibility.

  10. Evan says:

    Great menu!

    One question – how can I style the second level to have the same style of image as the first layer? Can I assign a 2nd .png with both states and adjust the placement for the second level links?

    Thanks!

  11. Ayala says:

    Hi¡¡the menu is beautiful. i would like to use it in a web page. I begins to work with dreamweaver and i have some problems with the code, because the menu appear but not correctly. Maybe i forgot something. Could you please help me??Thanks for all, thanks for your time.

    Ayala

  12. Thank you for this wonderful submit, genuinely loved perusing by means of all of this. It’s a bit funny simultaneously, but anyways I liked examining it. Everyday I come residence from do the job I search ahead to reading through several of your perform, since your views are actually shut to mine. English isn’t my 1st langauge so sorry for just about any spelling blunders I created. Keep up the great do the job!

  13. Peter says:

    You seem so helpful I’ll try 2 questions that mark me as not a 50th of the guru that you are.

    1) The 3rd or so substantive line in your is this -

    /* hack to correct IE5.5 faulty box model */
    * html #navigation {width:145px; w\idth:144px;}

    On the page the backslash doesn’t show up, and I’m guessing that it makes no difference whether it’s in or out, but WHY the 2 widths – I believe this is one of several, and sometimes the 2 numbers are the same, sometimes close.

    2) Also above, what’s with the asterisk (one of many) that precedes “html #nav… ” ?

    BUT MOSTLY – GREAT piece … Many thanks!!

    • Joren Rapini says:

      Thanks for the compliments. The w\idth with the the slash is to target IE 5.x specifically, and an asterik in css means all elements. In this case, * html is meant only to target IE6 and below (another CSS hack)

  14. Raffaele says:

    I’m sorry, you may be kind enough to insert a link to the full code and all images and css, I’m a newbie and do not get it to work.
    thanks

  15. Shaun Mclain says:

    Nice informative blog, thanks for sharing.

  16. Henrique says:

    where is navigation.png?

  17. [...] Joren Rapini.com Weblog » CSS Navigation Rollovers With Drop-downs (tags: via:mento.info rollover navigation menu js css) [...]

  18. [...] Joren Rapin offers CSS Navigation Rollovers With Drop-downs [...]

  19. [...] CSS Only Image Roll Over Navigation With Drop-downs – A single image navigation rollover tutorial with drop-downs using nothing but CSS that works in all necessary browsers. [...]

  20. [...] CSS Navigation Rollovers With Drop Downs – Source +108 Free CSS Menu Designs {Mega Menu, Dropdown, Horizontal, Vertical}” [...]

  21. [...] Download : CSS Navigation Roll Overs with Drop Down Menus [...]

  22. [...] CSS Navigation Rollovers With Drop Downs – Source CSS Navigation Rollovers With Drop [...]

Leave a Reply


This site is protected by Comment SPAM Wiper.