Blogging Tips

Horizontal navigation is quite popular however it becomes restrictive once you’ve got too many pages to list. Once you reach this point then you either need to convert to using a vertical navigation, or start using drop down menus.

Drop downs used to rely on JavaScript however all modern browsers can now manage drop down menus with just CSS (IE7+, Firefox, Opera, Safari; note, JavaScript is still required for IE6 and below).

The HTML Navigation

First we need to set up the html correctly. To do this we need to use nested lists. A list is usually written as

[sourcecode language="html"]

• Page 1
• Page 2
• Page 3
• Page 4

[/sourcecode]

We need to then create a list for each drop down and nest it into the list item for the parent link ie.

[sourcecode language="html"]

• Page 1
  • Subpage 1
  • Subpage 2
  • Subpage 3
• Page 2
  • Subpage 1
  • Subpage 2
  • Subpage 3
• Page 3
  • Subpage 1
  • Subpage 2
  • Subpage 3
• Page 4
  • Subpage 1
  • Subpage 2
  • Subpage 3

[/sourcecode]

As you can see, to nest the list the parent item and the sub menu is all wrapped within the list item tags (note, if you use WordPress then your page navigation is automatically created like this by default).

The CSS Code

With the CSS code, first we need to turn our list into a horizontal list. I’ve covered this previously on List Properties. So we need to add in the code required to make a horizontal menu and we’ll make it neat at the same time, which is

[sourcecode language="css"]#menu {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
width: 75px;
margin: 0 1px;
background: #900;
text-align: center;
border: 1px solid #009;
}
#menu a {
color: #fff;
display: block;
text-decoration: none;
padding: 2px 0 3px;
width: 75px;
}
#menu a:hover {
background: #000;
}[/sourcecode]

Now we need to hide the sub menu out of sight until it’s required. To do this we use absolute positioning and ‘push’ it off the page eg.

[sourcecode language="css"]#menu li ul {
position: absolute;
width: 75px;
left: -5000px;
}[/sourcecode]

This will hide the menu visually however a screenreader will still read the menu as normal, as will a search engine spider.

Now all we need to do is to set the menu to display when the user hovers over the parent menu. To do with we use the :hover pseudo class ie.

[sourcecode language="css"]#menu li:hover ul {
left: auto;
}[/sourcecode]

By using the property value of auto, we bring the list back into view, and make it appear below the parent link as it should.

Finally we need to tidy up the sub menu by removing the margins, padding and list style from it by targeting the sub menu in the first ruleset above. We also need to remove the left and right margin from the sub menu list items, as it will inherit the 1px left/right margin from our ruleset above for #nav li. Also, because we’ve used a border on the list items, the sub menu list has shifted over a pixel to the right, so we can fix this by using a negative margin to move it back to the left and line it up correctly ie.

[sourcecode language="css"]#menu li li {
margin: 0 0 0 -1px;
}[/sourcecode]

This gives us the final menu code and working example – Dropdown Menu Example.

This code and the menu is based on the Son of Suckerfish Dropdowns, where you can also see how to create multiple dropdowns and also how to add in the JavaScript code to have the menu working for IE6 and below as well.