Enkel horisontell meny med CSS

Här är ett exempel på hur man enkelt kan skapa en horisontell meny med bakgrund.

Till menyn behövs tre bilder: vänster hörna, bakgrund och höger hörna. Använd gärna mina (högerklicka och välj Spara som...):

 

Jag använder en "unordered list" som jag lägger i en div-tagg.

<div id="menu">
<ul>
<li class="first"><a href="#">Hem</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Företaget</a></li>
<li><a href="#">Kontakt</a></li>
<li class="last"><a href="#">Kontakt</a></li>
</ul>
</div>

Jag lägger på lite CSS till min lista så att den blir horisontell och får lite design.

<style type="text/css">
<!--
#menu{
position:absolute;
left:0;
top:10px;
height:30px;
}
#menu ul{
background-image:url(menu_bg.gif);
height:30px;
padding:0;margin:0;
}
#menu ul li{
float: left;
list-style: none;
margin:0;
padding:0px 15px;
border-left:1px solid white;
height:30px;
}
#menu ul li a{
display: block;
padding: 4px 0px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
#menu ul li.first{
background-image:url(menu_l.gif);
background-position:left;
background-repeat:no-repeat;
}
#menu ul li.last{
background-image:url(menu_r.gif);
background-position:right;
background-repeat:no-repeat;
}
-->
</style>