A simple horizontal css menu

Step 1:

Let’s create a simple unordered list

<div id="simple_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>

Result:

• Home
• Services
• About us
• Contact us
• Sitemap

Lets apply some style to it:

div#simple_menu li{
float:left;
list-style: none;
}

div#simple_menu li a{
display:block;
font-size:10px;
font-family:Verdana;
background: #333333;
text-decoration:none;
padding-left: 10px;
padding-right: 10px;
color:#ffffff;
line-height:30px;
}

div#simple_menu li a:hover{
background:#666666;
}

Result: