Horizontally centered varible width menu

by kuyabiye

HTML

<div id="menu">
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

CSS

#menu {
    text-align: center;
}

#menu li {
    display: inline;
    background: #000;
    padding: 5px 10px;
    float: left;
    margin: 0 1px 0 0;
}

#menu ul {
    display: inline-block; 
   *display: inline; /* ie7 fix */
}



#menu a {
    color: #fff;   
}


.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

JavaScript

/* horizontally centered varible width menu */