Proste poziome menu w css

Pokażę jak stworzyć naprawdę proste menu przy użyciu css. Tak będzie wyglądał efekt końcowy. Zacznijmy od przygotowanie kodu xhtml, który będzie pozbawiony formatowania. Utwórzmy odnośniki zgodnie z poniższym kodem:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact</a></li>
</ul>

Teraz zabieramy się do stylowania. Dodajmy następujące style:

ul, ul li { text-decoration: none;
margin: 0;
padding: 0;
display: block;
float: left;
 }

ul a:link, ul a:visited { display: block;
background: yellow;
text-decoration: none;
padding: 10px;
border-right: 1px solid black; }
ul a:hover {  background: orange; 
}

Pierwsza reguła usuwa domyśle formatowanie listy. Mianowicie usuwane są markery oraz zbędne marginesy. Ponadto wyświetlamy pozycje listy blokowo display: block i ustawiamy oblewanie float. Następnie stylizujemy odnośniki tak aby nie miały podkreślenia (text-decoration: none) oraz wyświetlamy je w bloku. Dzięki temu nie musimy wskazać dokładnie tekstu aby odnośnik zmienił wygląd. Określamy też margines wewnętrzny padding i kolor tła na żółty. Dodatkowo dla oddzielenia odnośników dodałam obramowanie z prawej strony (border-right: 1px solid black). Ostatnia deklaracja odpowiada za zmianę koloru tła odnośnika po najechaniu myszką.
Lekko modyfikując kod możemy uzyskać np. taki efekt. A to kod stylu dla tego przykładu:

ul, ul li { text-decoration: none;
margin: 0;
padding: 0;
display: block;
float: left;

 }
 ul
 {
 border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}

ul a:link, ul a:visited { display: block;
background: yellow;
text-decoration: none;
padding: 10px;
border-right: 1px solid black;
}
ul a:hover {  background: orange; }