OS X Style Menu

by kizer

HTML

<header id="head" class="vis">
    <nav id="menu">
        <ul>
        <li class="apple">
            <a href="#all">Apple</a>
            <ul class="sublist">
            <li><a href="#about-this-mac" data-rel="show">About This Mac</a></li>
            <li>Software Updates...</li>
            <li>App Store...</li>
            <li class="divider"></li>
            <li>System Preferences...</li>
            <li>Dock
                <span class="arrow"></span>
                <ul class="sublist-menu">
                <li>Turn Hiding Off</li>
                <li>Turn Magnification Off</li>
                <li class="divider"></li>
                <li>Position on Left</li>
                <li>Position on Bottom</li>
                <li>Position on Right</li>
                <li class="divider"></li>
                <li>Dock Preferences...</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li>Recent Items
                <span class="arrow"></span>
                <ul class="sublist-menu">
                <li class="disable">Applications</li>
                <li class="divider"></li>
                <li class="disable">Documents</li>
                <li class="divider"></li>
                <li class="disable">Servers</li>
                <li class="divider"></li>
                <li>Clear Menu</li>
                </ul>
            </li>
            <li class="divider"></li>
            <li>Force Quit...</li>
            <li class="divider"></li>
            <li>Sleep</li>
            <li>Restart...</li>
            <li>Shut Down...</li>
            <li class="divider"></li>
            <li>Log Out...</li>
            </ul>
        </li>
        <li class="here">
            <a href="#all">Finder</a>
            <ul class="sublist">
            <li><a href="#finder" data-rel="show">About Finder</a></li>
            <li class="divider"></li>
            <li>Preferences...</li>
            <li class="divider"></li>
        ...

CSS

#head nav#menu ul li {
    float: left;
    position: relative;
    height: 21px;
}

#head nav#menu ul li ul.sublist {
float: left;
left: 0;
top: 22px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
background: 
rgba(255,255,255,0.95);
box-shadow: 0 6px 12px rgba(0,0,0,0.7);
border-radius: 0 0 5px 5px;
visibility: hidden;
}

#head nav#menu ul {
margin: 0;
padding: 0;
}

#head nav#menu ul li ul.sublist li.disable {
color: 
#969696;
}

#head nav#menu ul li ul.sublist li:first-child {
margin: 5px 0 0 0;
}

#head nav#menu ul li ul.sublist li {
clear: both;
padding: 0;
margin: 0;
padding: 0 0 0 22px;
width: 200px;
font-size: 13px;
line-height: 20px;
}

#head nav#menu ul li {
float: left;
position: relative;
height: 21px;
}

#head nav#menu ul li ul.sublist {
float: left;
left: 0;
top: 22px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
background: 
rgba(255,255,255,0.95);
box-shadow: 0 6px 12px rgba(0,0,0,0.7);
border-radius: 0 0 5px 5px;
visibility: hidden;
}