Menu rollovers can be complicated, using JavaScript to swap images or HTML elements. But menu rollovers can also be fairly simple by just using CSS 2.1. Also, I have updated this article to improve the menu styles and I have posted the code in the /examples directory.

Here is an example menu with rollovers created with CSS 2.1. The rollovers in this menu are made with entirely with CSS and HTML; no JavaScript.

Example Menu with CSS Rollovers

CSS and HTML Code

 
<style type="text/css">
div#menu
{  background-color:#ffffff;
  border-top:1px #dddddd solid;
  border-bottom:1px #dddddd solid;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  width:166px;
}
a.button
{  /* Specify only the properties that differ from a.button */
  background:#f6f6f6;
  border-right:1px #dddddd solid;
  border-left:5px #dddddd solid;
  color:#444444;
  display:block;
  margin:0 0 1px 0;
  padding:5px;
  text-decoration:none;
  width:150px;
}
a.button:hover
{  /* Specify only the properties that differ from a.button */
  background:#fcfcfc;
  border-right:1px #dddddd solid;
  border-left:5px #cc0000 solid;
  color:#cc0000;
  width:150px;
}
</style>
 
<div id="menu">
<a class="button" href="javascript:void 0">Home</a>
<a class="button" href="javascript:void 0">Services</a>
<a class="button" href="javascript:void 0">Support</a>
<a class="button" href="javascript:void 0">Contact</a>
</div>

Point About the HTML Code

Before moving on to the point of this article &#mdash; using CSS instead of JavaScript image swapping for button-like rollover effects %mdash; I want to say one thing about the HTML code.

The recent trend is to use HTML unorder lists to create the structure of the menus, and this trend makes sense, because a menu is a list of links. I have chosen to not use HTML lists for the structure of my menu. I am using a <div> element and HTML links. I only bring this up because someone asked me about, and it was a good question. Why am I not using an HTML list?

For a simple menu, I believe that although an HTML list has merit for creating the menu structure, but it is not required. A series of links is just as much a list, even though it does not use a list structure. It is a series of links. That should suffice.

Also, using an HTML list incurs a certain amount of CSS overhead to redefine the default list styles. And I want the CSS to be as simple as possible in this article.

What Makes the Rollover Work

The key to making the rollover effect here is the use of the :hover pseudo-class from CSS 2.1. The .button:hover pseudo-class defines how the button will look when rolled over and the .button class defines how the button will look when not rolled over.

The .button class

Before getting into the rollover code, we should start with defining the CSS style for the normal state of the button.

 
a.button
{  background-color:#B7610A;
  border-bottom:1px #B7610A solid;
  border-left:5px #ED8114 solid;
  color:#ED8114;
  display:block;
  padding:1px;
  text-decoration:none;
  width:70px;
}

In the .button class CSS code, the properities of particular interest are border-bottom, border-left, display, text-decoration, and width.

Even though, in the normal state, you do not see borders around the buttons, they are there; but the borders are the same color as the menu background color. The reason for this is because in the rollover, or hover state, the target button will have a white left border and a white bottom border. These borders add space around the %lt;a%gt; element we are using for our button. Because the added borders would add space around the <a%gt; element, this would cause the button to move. We don't want that. So we want to add bottom and left borders that are the same color as the menu background, which will simply appear to turn on in the rollover effect.

The display property is necessary because we want our buttons to span the entire width of the menu. The default behavior for an HTML <a> element is to only be as wide as necessary to display the text of the link. In other words, the default display property value is inline, because the <a> element is an inline element. We want our <> elements to behave like block-level elements and fill up the entire horizontal width inside the menu <div> element. Otherwise, the background color of <a class="button"> would stop right after the last letter of the link text and we would see the background color of the menu <div> element to the right of the text. We will see in a minute that although setting the display property to block solves the style issues, it does not make the whole button hot or clickable. We will solve that issue with the width property.

The width property must be set to fill up the entire width of the menu <div> so that the entire button created with the <a> element. Otherwise, only the text of the link would be clickable.

We set the text-decoration property of our &lta> elements to none to remove the underline. This is an aesthetic issue. Sometimes I leave it, sometimes I remove it.

The .button:hover pseudo-class

I create a pseudo-class on the .button class. The pseudo-class named it the original class name plus the pseudo-class name. So .button plus :hover creates the pseudo-class .button:hover. And because the class is used in an HTML <a> element, we need to also specify the a selector in our CSS. So the final CSS selector to apply our hover style to our HTML <a class="button"> is a.button:hover.

 
a.button:hover
{  /* Specify only the properties that differ from a.button */
  border-left:5px #FFFFFF solid;
  border-bottom:1px #FFFFFF solid;
  color:#FFFFFF;
  width:80px;
}

The :hover pseudo-class allows you to define the style of an HTML element when the user hovers over it with a mouse, in other words, it lets you define the style of your rollover. You could also use it to swap background images or change any CSS property.

By defining the class .button, we define how our links will look when not hovered over, and this also creates the rollout effect. When the user rolls off the link, the links returns to the normal .button class style.

Also, note that the .button:hover pseudo-class does not have to redefine every CSS property defined in the .button class. All the pseudo-class needs to do is override the CSS properties that should change in value. All that changes for the rollover effect are border-left, border-bottom, color, and width. So those are the only properties defined in the .button:hover pseudo-class.

Using CSS to Create Rollover Buttons

One more thing I should mention is my use of the border-left, border-bottom, and width properties. By using different values for these properties in the :hover pseudo-class, you can create the appearance of buttons. The buttons in the example are not traditional looking buttons, but they do have a different appearance that goes beyond just highlighting the text or changing the background color of the links.

Using border-left to Create Tabs

I start off by defining the border-left propery with the same color as the menu background, so that they are in effect invisible. In the :hover pseudo-class I change the border-left value to the color white, which creates the appearance of a left tab in the rollover effect. This use of CSS borders is very useful. Many times, people will create an image for the tab effect, or they will create an HTML table and change the color of the <td> to the left of the text. Just use the CSS border-left property and you're good to go.

Actually, one detail of what I said above is not quite correct. Although normally you want to specify the border-left property, to avoid causing the button to move left and right when rolled over, in this case you don't need to, because of the padding on the inside of the menu <div>. But I specify the border-left anyway because it's good practice.

Similarly I use the CSS border-bottom property to create the underline effect, and so I specify the border-bottom property for the normal state of the button, even though you do not see a bottom border in the button's normal state.

Conclusion

All the other CSS is just to style the overall menu. The :hover pseudo-class is what specifically makes the rollover effect work. No JavaScript required! This example is also posted in the /examples directory as /examples/css/vertical-menu-1/.

javascript:void 0

Although there is no JavaScript used to create this menu, I do use a bit of JavaScript just to make the example menu more user friendly. Normally, you would not have javascript:void 0 in your href values. You would have a URL. But I did not want the button hrefs to actually work in the example menu, so you could click on them without being sent to another page. So I used the javascript protocol and the JavaScript void operator, which will return an undefined return value, which in turn, makes the hrefs do nothing.