Alt-Web Design & Publishing
Multi-colored CSS List Menu

Description:

In this demonstration, we are using a typical unordered list <ul> as our menu container. Each list item <li> is linked. Each link has a unique class name. Each class has its own CSS background style. This is a pure CSS menu, no JavaScript required.

Mouseover the menu items below. Also works with tab key for people without a mouse. Feel free to replace background-colors with CSS Gradients or images. Same menu with background images.

Example:

Method:

CSS Code

#rollover ul{
margin:0;
padding:0;
list-style:none;}

#rollover li {
list-style:none;
font-size: 16px;
font-weight:bold;
/**Makes horizontal menus. Remove the next rule for vertical menus**/
display:inline;
/**adjust space between items**/
padding: 12px; }

/**LINK STYLE**/

#rollover li a {
/**space around link**/
padding: 0.50em;
border: 1px solid silver;
height: 2.2em;
/**for IE**/
line-height:2.2em;}

/**LINK STATES**/

#rollover li a {text-decoration:none;}

#rollover li a:link {color:white}

#rollover li a:visited {color:gold}

/**on mouseover**/

#rollover li a:hover,
#rollover li a:active,
#rollover li a:focus {
color: red;
text-decoration:underline;
}

/**LINK CLASSES**/

#rollover a.item1 {background: black}

#rollover li a.item1:hover,
#rollover li a.item1:active,
#rollover li a.item1:focus {background: yellow}

#rollover a.item2 {background: green;}

#rollover a.item2:hover,
#rollover a.item2:active,
#rollover a.item2:focus {background: lime}

#rollover a.item3 {background: maroon;}

#rollover a.item3:hover,
#rollover a.item3:active,
#rollover a.item3:focus {background: pink;}

#rollover a.item4 {background: navy;}

#rollover a.item4:hover,
#rollover a.item4:active,
#rollover a.item4:focus {background: aqua;}

/**END ROLLOVER**/

HTML Code

</ul>