Menu #tirth-try

Elements are dynamically centered without the container being centered with a fixed with. Inline blocks are used to achieve this. Support: IE7+ and modern browsers.

by sapioit

HTML

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

CSS

ul {
    text-align: center;
    margin-top:25px;
}
li {
    display: inline-block;
    list-style: none;
    padding: 5px 15px;
    background: #82B5DA; 
    line-height: 20px;
}
li:hover { background: #599CCE; }
li a:hover { color:#fff; }
li a { color: #333; text-decoration: none; text-shadow: 1px 1px 0 rgba(255,255,255,0.3); }

/* IE7 Hack - http://www.brunildo.org/test/InlineBlockLayout.html */
li { *display: inline; zoom: 1; }
?

JavaScript

/* 
    Browser support: IE7+ and modern browsers.
*/