Alireza Balouch

Here is an old trick to make horizontal menu with CSS.

First you have to make a list with UL and LI tags.

 
<ul class="menu">
<li><a href="http://swape.net">My homepage</a></li>
<li><a href="http://linux.org">Linux.org</a></li>
<li><a href="http://google.com">Link to google</a></li>
</ul>
 

• My homepage
• Linux.org
• Link to google

Ok here is a list. Now we must make the list items to be horizontal and not vertical. So we must use CSS to set the float to be left and make the list-style: none;

.menu li{ float: left; list-style: none; }

Then we must make them look like a buttons. So we add some borders and padding and margins. Then the whole CSS code look like this:

.menu li{
float: left;
list-style: none;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}
.menu li a {
display:block;
padding:3px;
margin:1px;
border:1px solid #ccc;
text-decoration:none;
color:#332;
background-color: #EEE;
}
.menu li a:hover{
color:#EEE;
background-color: #331;
}

You can download the example file here: Horizontal CSS menu

• Leave a comment...