Ti trovi in: Home > CSS Menu > Menu n.04/O

CSS Menu - CSS Menu Design

CSS Menu orizzontali

Menu n.04/O - Source XHTML e CSS

Menu simile a quello di questo sito in versione orizzontale con cambio colore di fondo e del bordo sx sul link attivo e al passaggio del mouse.

(X)HTML:

<div id="menu04o">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
 </ul>
</div>

CSS:

#menu04o {
width: 100%;
font: 80% Arial, Helvetica, sans-serif;
}
#menu04o ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#menu04o li {
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu04o a:link, #menu04o a:visited {
float:left;
padding: 0.3em 1.5em 0.3em 1.5em;
margin: 0em;
border-left: 10px solid #41545F;
background-color: #05181E;
color: #FFFFFF;
text-decoration: none;
}
#menu04o a:hover, #menu04o a:focus, #menu04o a:active{
background-color: #41545F;
color: #FFFFFF;
border-left: 10px solid #EAD100;
}