Fork of the Original OS X Menu Style

CSS3 Based menu, that looks great for dropdowns and multiple checkboxes.

by kizer

HTML

<script src="http://github.com/kerberoS/jQuery-Tweets/raw/master/js/jquery.tweets.0.1.js"></script>
<ul id="menu">
    <li id="all">All Plans</li>
    <li>Bronze Plan</li>
    <li>Silver Plan</li>
    <li>Gold Plan</li>
    <li class="selected">Platinum Plan</li>
    <li>Titanium Plan</li>
    <li class="selected">Diamond Plan</li>
</ul>






<copyright>
&#9733; Court Kizer &copy; 2011 – All Rights Reserved.
</copyright>

CSS

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-image: url(http://kizer.me/checker.gif);
    margin: 20px 20px;
}

hr {
    margin: 30px 5px;
    border: 0;
    border-top:1px solid #e2e2e2;
}

copyright {
 position: fixed;
 bottom: 10px;
 left: 0px;
 right: 0px;  
 margin: 0 auto;
 text-align:center;
 color: #666;
 font-size: 11px;
 font-weight: 700;
}

/* everything above this line is for testing purposes only and is not needed in your code base */
/* =========================================================================================== */


ul#menu {
    /* === Layout ==== */
    position:relative;
    left:0px;
    top:0px;
    width: 250px;
    padding: 0px;
    /* === Typography ==== */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #2a2a2a;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:13px;
    text-shadow: #FFF 0px 1px 0px;
    text-overflow: ellipsis;
    /* === Style ==== */
    background: rgba(255,255,255, .6987);
    border-radius: 6px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-box-shadow:
        rgba(0,0,0, .389) 0px 1px 10px;
    /* === Remove Outlines & Accidential Drags ==== */
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    cursor: default;
    outline: none;
}

li {
    position:relative;
    padding: 5px;
    border-bottom:1px solid rgba(0,0,0, .11111);
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-box-shadow:
        rgba(255,255,255, 1.0) 0px 1px 0px inset;
   text-indent: 30px;
        -webkit-background-clip: padding-box;

}

li#all {
 font-weight: 700;
 border-bottom:1px solid rgba(0,0,0, .6875);

}

.selected {
 background: transparent url(http://kizer.me/recurly/check-16px.png) no-repeat 7px 4px;   
}


li:hover {
    color: #FFF;
...