<style>

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

#rollover li {
list-style-image:none;
font-size: 14px;
font-family: "arial" "helvetica" "sans-serif";
font-weight: bold;
letter-spacing: 0.1em;
/**Makes horizontal menus. Remove the next rule for vertical menus**/
display:inline;
/**adjust space between items**/
padding: 0;
margin-left:0;
margin-right:0;
border: 0;
}

/**LINK STYLE**/

#rollover li a {
/**space around link**/
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
border: 0;
height: 0.75em;
/**for IE**/
line-height:1.0em;}

/**TEXT LINK STATES**/

#rollover li a {text-decoration:none;}
#rollover li a:link {color:white}
#rollover li a:visited {color:#f7f8af}
/**on mouseover**/
#rollover li a:hover,
#rollover li a:active,
#rollover li a:focus {color: white; text-decoration:underline;}

/**LINK CLASSES & BACKGROUNDS**/

#rollover a.item1 {
background: #05376f;}

#rollover li a.item1:hover,
#rollover li a.item1:active,
#rollover li a.item1:focus {
background: #05376f; }

#rollover a.item2 {
background: #6eb82a;}

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

#rollover a.item3 {
background: #b90072;}

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

#rollover a.item4 {
background: #048cf5;}

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

#rollover a.item5 {
background: #20c38d;}

#rollover a.item5:hover,
#rollover a.item5:active,
#rollover a.item5:focus {
background: #20c38d;}

#rollover a.item6 {
background: #e74124;}

#rollover a.item6:hover,
#rollover a.item6:active,
#rollover a.item6:focus {
background: #e74124;}
/**END ROLLOVER**/

</style>



<ul id="rollover">
<li><a href="#" class="item1">flipple home</a></li>
<li><a href="#" class="item2">the flipple story</a></li>
<li><a href="#" class="item3">more flipple uses</a></li>
<li><a href="#" class="item4">about us</a></li>
<li><a href="#" class="item5">contact us</a></li>
<li><a href="#" class="item6">shop now</a></li>


</ul>