CSS horizontal menu.

Cum de creat un meniu orizontal utlizind CSS si HTML liste? Nimic mai simplu, in exemplul ce urmeaza am creat un meniu orizontal destul de simpatic. Nu este nevoie de imagini pentru background sau pentru bordere. Am folosit si text-shadow pentru a stiliza textul meniului, din pacate IE se incapatineaza sa-l interpreteze, Firefox si Google Chrome il interpreteaza destul de bine. Enjoy :)

Code example

HTML
<div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </div>

CSS
#nav{
    font-size:0.9em;
}
#nav ul{
    list-style:none;
    padding:0;
    margin:0;
    padding-top:1em;
}
#nav li{
    display:inline;
}
#nav a:link, #nav a:visited{
    padding:0.4em 1em 0.4em 1em;
    color:#333;
    font-weight:bold;
    background-color:#d0d9e2;
    text-decoration:none;
    text-shadow: 1px 1px 1px white;
    border-top:solid 1px #e0e0e1;
    border-right:solid 1px #9f9fa1;
    border-bottom:solid 1px #acacad;
    border-left:solid 1px #dfdfe0;
}
#nav a:hover, #nav a:active, #nav a:focus{
    background-color:#6d8ab7;
    color:white;
    text-shadow: 1px 1px 1px #22456b;
}