Das kannst du ganz einfach mit CSS tun du gibst einfach jedem menu Punkt eine andere class.
Also:
Code:
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#" class="green">about us</a></li>
<li><a href="#" class="blue">services</a></li>
<li><a href="#" class="orange">solutions</a></li>
<li><a href="#" class="brn">contact us</a></li>
</ul>
Code:
#menu{
background:#fff;
width:170px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
margin:2px 0;
}
#menu li a{
list-style:none;
background:#82837c;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
text-decoration:none;
border:solid #777776;
border-width:0 6px 0 6px;
display:block;
height:30px;
line-height:30px;
padding:0 0 0 10px;
}
#menu li a:hover{
background: url(Bildadresse);
color:#fff;
text-decoration:none;
}
#menu li a.green{
background: url(Bildadresse);
border:solid #6f9234;
border-width:0 6px 0 6px;
}
#menu li a:hover.green{
background: url(Bildadresse);
}
#menu li a.blue{
background: url(Bildadresse);
border:solid #377e9f;
border-width:0 6px 0 6px;
}
#menu li a:hover.blue{
background: url(Bildadresse);;
}
#menu li a.orange{
background: url(Bildadresse);
border:solid #d65611;
border-width:0 6px 0 6px;
}
#menu li a:hover.orange{
background: url(Bildadresse);
}
#menu li a.brn{
background: url(Bildadresse);
border:solid #87249f;
border-width:0 6px 0 6px;
}
#menu li a:hover.brn{
background: url(Bildadresse);
}
Hoffe ich konnte dir weiterhelfen.
______________
WebDesign | Corporate Design | Redesign
