Creating menus: Vertical Navigation > Explained

In this article I will explain how to create simple vertical navigation menu with one sub-menu. I suppose there are many explanations of how to create vertical (and horizontal) navigation menus all over the web, but when I was just a beginner I learned to write both XHTML and CSS, but never really understood why I wrote this or that (in CSS file). I will try to help you.

The code

The code for creating menus is really simple. If you know how to create an unordered list, you will surely now how to build navigation. Let’s say you have a firm and you wish to build firm’s website. In your menu you have these items: homepage, about us, projects (older and active) and contact page. Here is the code.

<div id="navigation">

	<li><a href="#" title="Homepage" class="selected">Homepage</a></li>
	<li><a href="#" title="About us">About us</a></li>
	<li><a href="#" title="Projects">Projects</a>
			<li><a href="#" title="Older projects">Older projects</a></li>
			<li><a href="#" title="Active projects">Active projects</a></li>
	<li><a href="#" title="Contact">Contact</a></li>


We used an unordered list and contained id inside a DIV with ID "navigation". In the past everybody used tables for this kind of navigation, giving each cell it’s own class. The submenus were constructed with different classes than the first menu items. This worked just fine, but you had to be over the text to follow the link. When using unordered lists for displaying navigation, we can make the whole item a link, and that is certainly more accessible.

Step by step explanation of creating vertical navigation menu

First, we will just set a few ground rules. We will set the text size in our navigation menu to font-size:1.1em. Why on 1.1em? The best way of defining screen font size is to set the base value in BODY to 62.5% (this way the font-size is set to 10px). Each 0.1em we add, means the font-size is 1px higher. We also said to the browser that navigation width is 200px.

#navigation {

Next, we will remove the bullets from our lists, and reset the margin and padding to 0. Both Firefox and IE will now display the list as they should, and the menu will be 200px wide.

#navigation ul {

Now, let’s play with links. Because we want each navigation element to be in it’s own row, and so on, the navigation will be displayed as block. To remove the default underline from all the links in the navigation we used text-decoration:none;. Furthermore, we want each navigation element to be displayed with white text color:#fff; on grey background background-color:#333;, and removed from both top and down 5px, and from right and left 10px with padding:5px 10px;. We also want to remove each element from each other with 1px thin line by adding border-bottom:1px solid #fff;.

#navigation a {
	padding:5px 10px;
	border-bottom:1px solid #fff;

Please note: We used height:1%; because of Internet Explorer and it’s ability or better said disability to calculate proper height when you don’t use width and height values for elements. Without this value your navigation element will have approximately 10px bottom margin.

To separate the submenu, we used different background color and padding-left values. If we have more than one submenu in depth we would use #navigation li li li a { ... } and one more li for every other submenu.

#navigation li li a {

To conclude this article, we will style up our link when mouse comes over, and when the element is selected. We grouped styles for a:hover and a.selected to show the same background color and text color, for both mouse over and selected element.

#navigation a:hover, #navigation a.selected {
#navigation a.selected {

Why I bolded the text when the element is selected and why not when the mouse is over? If you didn’t used bold text as links, and you have enough text for almost one row, when the mouse comes over the text and it gets bold, the text might slip into the next row, and we won’t that to happen, right?

The example

Creating menus example

Further reading

List examples at Listamatic
The display declaration » Learn more about display modes
Maratz » Essentials of CSS Hacking For Internet Explorer

5 thoughts on “Creating menus: Vertical Navigation > Explained”

  1. Excellent article! I always seem to have difficulties setting up vertical menus just because of IE. But I use a slightly different approach to this. Instead of a bit unsemantic height: 1%; (don’t know, just looks weird to me ^^) I simply float and clear all li elements.

    float: left; clear: left;

    It has the desired effect in all browsers I tested in (yes, even IE7).

  2. @Miha I never had a problem when dealing with menu elements of exact size (for example: #navigation a {width: 200px; height: 30px;}). The problem shows up when dealing with no specific width or height (I use no specific width/height when I want the menus to display differently depending on their position in the layout). I never had the problems with height:1%; in Firefox or even IE. But I use float in horizontal menus or when I want to replace menu element with an image. I am also preparing the articles for explaining the horizontal navigation and image replaced navigation too, so maybe I can help somebody:)

  3. Hey Emanuel! Great article, indeed! But, I have one small comment.

    The best way of defining screen font size is to set the base value in BODY to 62.5% (this way the font-size is set to 10px).

    I’d argue against this one. This may set the font size to 10px if a person is surfing with the default browser settings, i.e. with the “Text Size” option in Firefox (or a similar one in any other browser) set to “Normal”, but if he or she sets the Text Size option to a higher or lower value, the nominal text size will be higher or lower than 10px.

    I usually set the font-size in the body selector to 1em (or any other value, but I find 1em suitable for most occasions), and later define the relative font-size of each element with percentages.

    Just my $.02 :). I’m looking forward to the future articles regarding the navigation!

  4. By the way, you may want to fix the rendering of blockquotes in the comments – I tried to quote a part of your article in my comment above with the blockquote tag, but its style turns out to be the same as the rest of the comment.

  5. @Nikola I was referring to the default values of base font size. I always assume that the visitor is surfing with the default browser settings, but I always design sites while thinking of people who don’t have the default settings (rather higher, for example). I don’t have problems reading the text (you know my screen resolution, right?:), and if one wishes he can always make the text larger with the options you described.

    P.S. I will fix the rendering of blockquotes later today, tnx for the info.

Leave a Reply

Your email address will not be published. Required fields are marked *