The Drop-down menus
[ For the slideshow, view source ]
We're going to be using CSS3 transitions to make the menus slide down gently, and the background colors fade softly in and out.
This is a barebones multi-level drop down menu made entirely in CSS, that plays nice in all browsers and degrades gracefully to regular CSS2 hover effects in IE.
We're also going to address a couple of typical layout challenges in IE.
The goal of this tutorial is to provide only the most fundamental code necessary for the implementation of the drop-down menu, which can then be used as a template for styling to your heart's content.
[We will not be using the usual display:none, display:block technique, so don't look for it]Step 1.
Let's set up our html. We're going to put our menu inside a header, and we're also going to create a "content" area below the header. A little explanation:This part of the process addresses IE's stacking order, and will ensure that our menu doesn't render behind the Content area, an issue I have seen often. A typical scenario is to have some kind of image scroller under the header, which requires the scroller container to have relative positioning, and causing the menu to render behind the scroller in IE. In order to fix this, our Header MUST must have position:static.
We're going to use an unordered list to create the menu structure and place it inside the navigation div:
(make sure you replace the #'s with actual links, for example: <a href="#"> becomes <a href="mypage.html">)
To position the menu horizontally we'll use float:left on the menu items and a couple of basic styles to make it presentable:
The drop-down boxes. We are going to apply the same styles to secondary and tertiary drop-downs, but you can choose to add additional styles to differentiate them.
Step 5 - optional
I like to have separator lines between menu items, but only BETWEEN menu items. And I don't want them to go all the way to the edges of the drop-down box either, which means more CSS tweaking, but I think it looks nicer.
Normally we could use :last-child to remove the last line in the list, but since IE doesn't recognize :last-child, we'll use the + selector instead. The following rules insert lines between each menu item, and make sure we don't have any extraneous unwanted lines either. It's a little hairy to get your head around at first, but it works across the board. And since the lines don't go all the way to the edges, it also makes sure there are no weird gaps when you hover over an item.
So by now you should have a plain vanilla CSS drop-down menu. Let's add the magic.
It's actually going to be really easy.
Add these properties to the .navigation ul ul rule:
And these, to the .navigation ul ul li rule:
Just one more thing if you care about IE 7.
To remove the gaps between menu items in IE 7, I'm going to add some conditional statements into the top of the file:
Replace these two lines
at the top of your file with this:
and add this rule to the css:
An optional enhancement:
I'm going to add a little arrow to the items that have tertiary menus:
make an arrow.png graphic, and add this rule to your css:
add the arrow class to the links that have tertiary menus:
ie: <a href="#" class="arrow">Level 2 - 1</a>
Also, you'll want to remove the background-color in .navigation ul ul. It was meant for illustration purposes only.
The file is here for your perusal (view source):