Creating Rollover Effect Using CSS List Menus

Ever seen those fancy links where they change the appearance as soon as you place your mouse cursor on them. See a simple example of a rollover effect here. The CSS definition of this simple example goes like this:

<style>

body{
background-color: #FFFFFF;
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#nav{
width: 150px;
}

#nav ul{
display: inline;
}
#nav ul li{
list-style-type: none;
line-height: 150%;
}
#nav ul li a{
color: #6495ED;
text-decoration: none;
border-bottom: #6495ED 1px dotted;
}
#nav ul li a:hover{
color: #DC143C;
text-decoration: none;
border-bottom: #DC143C 1px solid;
}

</style>

This sort of rollover simply changes the color or the look of the underline.

Now let us move on to some complex looking rollover. To see what I am talking about, have a look here. First let us view the entire CSS definition of this rollover menu and then we shall discuss what all is happening.

<style>

body{
background-color: #FFFFFF;
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#nav{
width: 150px;
}

#nav ul{
display: inline;
}
#nav ul li{
list-style-type: none;
line-height: 150%;
border-left: #000000 8px solid;
border-top: #000000 1px solid;
border-bottom: #000000 1px solid;
border-right: #000000 1px solid;
background-color: #BDB76B;
margin-top: 5px;

}
#nav ul li a{
color: #000000;
text-decoration: none;
display: block;
padding-left: 10px;
padding-right: 10px;
}
#nav ul li a:hover{
color: #FFFFFF;
background-color: #4682B4;
text-decoration: none;
}

</style>

And this is how you use it:

<div id="nav">
<ul>
<li><a href="#">This is link 1</a></li>
<li><a href="#">This is link 2</a></li>
<li><a href="#">This is link 3</a></li>
<li><a href="#">This is link 4</a></li>
</ul>
</div>

While defining your CSS layout, once you define a main DIV ID, you can define all the tags that belong to that ID; for instance here we have the main DIV called #nav (let it be small for “navigation”). All the tag definitions preceded by #nav belong to this particular DIV ID. Take for instance

#nav{
width: 150px;
}

#nav ul{
display: inline;
}
#nav ul li{
list-style-type: none;
line-height: 150%;
border-left: #000000 8px solid;
border-top: #000000 1px solid;
border-bottom: #000000 1px solid;
border-right: #000000 1px solid;
background-color: #BDB76B;
margin-top: 5px;

}

As you can see, there is a DIV with an ID nav. This DIV with ID nav further contains a list tag <ul> that further contains its own tag <li>. All the features are inherited downwards. This first definition is self-explanatory. The real fun begins when we define the <li> tag. Here too, all the definitions are fairly simple. The only definition that may nened explanation is list-style-type: none, which means that while displaying the list, there is no need to display any kind of buller before that.

Then we come to the <a> tag definition. The crucial part here is:

display: block;
padding-left: 10px;
padding-right: 10px;

Again, the padding setting inserts space left and right, and display: block fills the entire bullet space upon the rollover. Without setting the display as block only the background behind the text is changed, as you can see it here, and not the complete block.