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">
-
</ul>
-
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
