You can easily see that the secondary navigation sections change according to what page you are on. Here’s a different page:
This is a great alternative to using drop-down menus (a menu with a sub-menu on hover) because this method will work for any and all browsers.
CSS Drop-Down Menus
So what’s wrong with using CSS for drop-down menus? The answer may not be a huge surprise to you: IE doesn’t handle it well.
For most drop-down menus controlled with CSS, you essentially use a list structure with a sub-list for each menu item. The top list item is the shown menu item, and the sub-list contains the sub-menu items. You start by setting the value of the sub-list to display:none and then on hover of the main list item, you make it change the value of the secondary list to display:block. It’s a very simple concept, and theoretically this is how all menus will be done at some point in the future.
The problem is in IE6 and lower, primarily. It is possible to create this effect in IE7 (though typically you need some CSS magic specifically for IE7 to make it work), but earlier versions don’t support it properly. Why? Because IE6 and earlier had serious problems with handling actions on child-elements when triggered by a parent-element.
So, if you really want to use CSS for your menus, what’s a good way to handle this? Anything server side is ideal, but then you get into the issue of trying to detect browsers – which can work well most of the time, except that many versions of Opera cloaked itself as IE as the default setting.
I’m going to leave that thought to simmer in your mind, and move on to how this works (or doesn’t, as the case may be) for horizontal menus instead of vertical ones.
Here’s an example of what could happen if the layers are set to float over the content, and they were no longer collapsed:
The obvious problem is not just that it looks lousy, the -real- issue is that the content is blocked.
Or if they are not set to float over the content, here’s what you could end up with:
In the second example, you’ll see a different problem – the content gets shoved down by the constantly expanded menu. Depending on how you have designed your page, moving the content like that could break your design by shifting other elements too far out of place. Aside from that, it looks bad, but not nearly so bad as the first option.
Middle Ground Option
Best Choice Suggestion
Overall, there are lots of different ways that you can handle navigation. Some are significantly better and easier than others. Some are accessible, some aren’t.