Note: you can read a more interactive version of this article at
http://www.aboutwebdesigning.com/2005/10/15/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 at
http://www.aboutwebdesigning.com/examples/rollover1.php. The CSS
definition of this simple example goes like this:

== Code begins ==



== Code ends ==

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 at
http://www.aboutwebdesigning.com/examples/rollover2.php. First let us
view the entire CSS definition of this rollover menu and then we shall
discuss what all is happening.

== Code begins ==



== Code ends ==

And this is how you use it:

== Code begins ==



== Code ends ==

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

== Code begins ==

#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;

}

== Code ends ==

As you can see, there is a DIV with an ID nav. This DIV with ID nav
further contains a list tag