A CSS menu with rollovers.

Author: Stefan Vervoort | Please Comment!

This article is for people who have little to no experience with CSS. I will explain very detailed which codes to use and how to use them. At the end of this tutorial, you can code yourself this rollover menu, completed in CSS and HTML.

!tip ALWAYS check your code on faults. You can validate CSS and (x)HTML.

!tip Use tabs and space to organize your codes (wordpress wouldn’t allow me to). You can download the files (with organization) below.

We’ll start. First, you should create 2 files. One called rollovers.css and the other one rollover.html. Those files should be empty. The next step is to open up rollover.html. In this file, our content will be stored. In the file, past these codes:

Those codes will tell your browser everything it needs to know. It is written in XHTML 1.0, so your browser will render your webpage the XHTML 1.0- way. You can read more information about DOCTYPEs here.

We are ready to start with the rollover menu. First, we will only code the structure. If we have completed that part, we can start changing the style.

So, you want the codes. No, I’ll first tell you something about the structure. It may sound strange when you hear this for the first time, but rollover menus are built from Unordered lists. When I first heard this I thought it wasn’t possible. I thought CSS could never change the expression of a list that much. But CSS can!

Everything that is content will need to be coded between the <body> </body> area. That’s where we start typing too. We’ll start with a list, which you can call for with the <ul></ul> attribute. For every item you want add, you need a <li></li> between the <ul> attribute. Example:

<ul>
	<li>item</li>
	<li>item2</li>
</ul>

You can add as many items as you want, but maybe it’s easier to keep it two or three items at this time. When we are finished, there’s enough room for more items.
In a rollover menu, there need to be clickable links. All you have to do is add a <a href=”"> before and a </a> after your item.

<ul>
	<li><a href="http://www.divitodesign.com/wp-admin/item.html">item</a></li>
	<li><a href="http://www.divitodesign.com/wp-admin/item2.html">item2</a></li>
</ul>

Your menu structure is finished! The only thing we have to do in the .html file is to make sure the right style file is included. We do this with an extern CSS file. You have to include this in the rollovers.html through the following codes.

As you can see, we include the rollovers.css as the extern CSS file.

Now, save the file and see how it looks. We will now start with the CSS in the rollover.css file!

CSS

Open up your CSS file and make sure it is empty. In CSS, you style existing attributes like <ul> , <body> and <font> as the way you write them. Example:

ul {
color:#fff;
}

With this very simple code, you style all the ul> attributes in the webpage. You can add a lot of style-attributes to every attribute you would like to style.

If you want to style a link attribute inside a ul> attribute, this is the way you should do it.

ul a {
color:#fff;
}

When you take a look on your rollover.html file, you see that your menu has this structure:

<ul>
	<li><a></a></li>
</ul>

As you can see, the a> attribute is inside the li>, and the li> is inside the ul> attribute. To style the links inside your menu, you have to call for it in your CSS file like this. This order only.

ul li a{
color:#fff;
}

And, because we will need to style all the ‘menu items’, we need to style ul li too. Take a look below for some basic style on the ul, ul li and ul li a styles. Explanation is beneath the codes.

ul{
margin: 0;
padding: 0;
font: 13px 'Lucida Grande', Arial, sans-serif;
list-style-type: none;
}
ul li{
display: inline;
}
ul li a{
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #b0f664;
border:1px solid #8bda35;
}

Let’s start with the ul attribute. Margin is the distance outside the list, padding is inside the box. Font is just the font used, size of the font etc. Now an attribute you might have never heard of. It’s called list-style-type and it defines what should be shown before every item. When you look at your default list-style-type, you’ll notice there are black dots before every item. This is something we do not want on our menu, so we set its value to none. If you want your whole menu to show something, like font size, you can change it all in this ul attribute.

The ul li attribute. I have not much to tell you about this one. Only thing I change from the default version is the display value. When you look at your default list, you see the items are beneath each other. This is something we don’t want with the menu we are making. When you want a vertical menu, you should not change this value.

Now, take a look at the ul li a style values. In this style, you can change everything you see when you don’t roll over the menu with your mouse. You see I wanted a border, a background-color, a text color and some space between the text and the border, called by with padding. At default, a link has a blue color, with an underline. I deleted the underline by changing text-decoration to none.

Please save your file and see what changed. You could also save it after you have added a single line, so you know which things changes with every aspect you add.

To finish this menu, you might want a different background color when you roll over an item. You can do this with changing the ul li a:hover attribute. Take a look below for the codes.

ul li a:hover{
background-color: #ccf69f;
border:1px solid #a8e765;
}

You don’t have to re-type all the things you don’t want to change on the rollover. Only the things, like background-color and border, you would like to change goes here.

We are finished! This is the easiest way to make a rollover menu. Best of all, this is written the standard way! I love standards, and I hope when you have read this tutorial, you think the same.

If you want the final code all together, please download the files below and enjoy!

Download (right mouse > save as): rollover.html and rollover.css