Mauro Pirrone | Blog

In this tutorial I’m going to show you how you can take advantage of the “ul” tag in HTML to create a CSS-based menu.

The menu…

http://www.labs.mauropirrone.com/css/css-vertical-menu.html

Step 1

Create an unordered list. Place the unordered list inside a div tag with class "menu".

Make sure that all list items have a link. For this example I’ve used # which indicates a nowhere link.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Step 2

Create a class style named ".menu" and set rules which apply to the menu in general such as font-family, font-size, width and so on.

.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 8em;
}

Step 3

Create a style for ".menu ul". Such style will effect the unordered list contained within the div tag with class "menu" only. Set padding and margin to 0 as well as list-style-type to none.

.menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

Step 4

Craete a style for ".menu a". One important setting here is to set display to block. This makes the "a" tag occupy the entire parent object; in this case the "li" tag.

.menu a {
color: #000000;
background-color: #CADDF0;
border: solid 1px #333333;
display: block;
padding: 5px;
text-decoration: none;
}

Step 5

Create a style for ".menu a:hover". This will effect the hover state of the menu item. Change background colours, font colours…be creative!

.menu a:hover {
background-color: #FFCC00;
color: #000000;
}

That’s all it takes to create CSS-based menu