Edit in JSFiddle

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

ul { display: table; margin: 10px auto; min-width: 320px;}
li { float: left; list-style: none; margin-left: 5px; padding: 5px 0; }
li:first-child { margin-left: 0; }
li a { 
    background: #82B5DA; 
    border: 1px solid #599CCE; 
    border-radius: 3px; 
    box-shadow: 0 0 3px rgba(0,0,0,0.3); 
    padding: 5px; color: #333; 
    text-decoration: none; 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.3); 
}
li a:hover { background: #599CCE; }