CSS Lists as Hierarchical Navigation: Horizontal Menu

May 12, 2009 | CSS, Web Design

horizontal_menu

This menu:

  • items aligned horizontally
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
list-style: none;
}

2. Set the width and margin of the menu.

#mainmenu {
margin: 10px;
width: 750px;
font-family: Tahoma;
}

Setting the width prevents the menu from wrapping when the user shrinks the browser window.

3. Set the list items to display as blocks. We will also give them a width and float them to the left so they will be displayed to the right of the preceding item. We will also give them a margin border.

#mainmenu li {
display: block;
width: 120px;
float: left;
margin-left: 2px;
border: 1px solid #333333;
}

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
}

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}

The Full CSS Code

So, to achieve the horizontal menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type=”text/css”> and </style> to your CSS file.

<head>
<style type=”text/css”>

ol, ul {
list-style: none;
}

#mainmenu {
margin:10px;
width:750px;
font-family: Tahoma;
}

#mainmenu li {
display:block;
width:120px;
float:left;
margin-left:2px;
border:1px solid #333333;
}

#mainmenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#333333;
color:#FFFFFF;
}

#mainmenu a:hover {
background-color:#8CC919;
color:#FFFFFF;
}
</style>
</head>


Resources:

>> Stay tuned as next time, we will be creating a vertical menu.

Comments

comments