Simple roll-over menu using CSS

Rollover menu

Roll-over HTML

<nav id="rollover">
<ul>
 <li><a href="#">Item one</a></li>
 <li><a href="#">Item two</a></li>
 <li><a href="#">Item three</a></li>
 <li><a href="#">Item four</a></li>
</ul>
</nav><!-- rollover -->

Roll-over CSS

/**************************************************************
 ROLL-OVER MENU STYLES 
**************************************************************/
/*  Change background-color and color (text color) 
to suit your design */
#rollover
{
 padding: 0;
 margin: 0;
 list-style-type: none;
 float: left;
 width: 600px;
 color: #fff;
 background-color: #036;
}

/*  DO NOT CHANGE THIS */

#rollover li { display: inline; }

/*  
#rollover li a: background-color and color (text color) should match 
the ul.rollover specification; border color also can be changed to 
suit your design 
*/

#rollover li a
{
 float: left;
 color: #fff;
 background-color: #036;
 padding: 0.3em 10px;
 text-decoration: none;
 border-right: 1px solid #fff;
 font-size:14px;
}

/*  #rollover li a:hover: change background-color 
and color (text color) to suit your design   */

#rollover li a:hover
{
 background-color: #369;
 color: #fff;
}