Mac OS X Lion Style Dropdown Menu

by kizer

HTML

<menu type="toolbar" class="settings-menu">
<ul>
    <li>Admin</li>
    <li>Admin - New System</li>
    <li class="selected">Analytics</li>
    <li class="hr"></li>
    <li></li>
    <li class="selected"><hr></li>
    <li>Log Out Court Kizer</li>
 <li>
  <menu label="File">
   <button type="button" onclick="file_new()">New...</button>
   <button type="button" onclick="file_open()">Open...</button>
   <button type="button" onclick="file_save()">Save</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="edit_cut()">Cut</button>
   <button type="button" onclick="edit_copy()">Copy</button>
   <button type="button" onclick="edit_paste()">Paste</button>
  </menu>
 </li>
</ul>
</menu>




<table class="bordered">
    <thead>

    <tr>
        <th>#</th>
        <th class="right"></th>             
        <th>IMDB Top 10 Movies</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
         <td class="right">ICON</td>             
        <td>The Shawshank Redemption</td>

        <td>1994</td>
    </tr>        
    <tr>
        <td>2</td>
         <td class="right">ICON</td>                     
        <td>The Godfather</td>
        <td>1972</td>
    </tr>
    <tr>

        <td>3</td>  
          <td class="right">ICON the long version</td>                    
        <td>The Godfather: Part II</td>
        <td>1974</td>
    </tr>    
    <tr>
        <td>4</td> 
        <td class="right">ICON</td>             
        <td>The Good, the Bad and the Ugly</td>
        <td>1966</td>

    </tr>
    <tr>
        <td>5</td>
        <td class="right">ICON</td>             
        <td>Pulp Fiction</td>
        <td>1994</td>
    </tr>
    <tr>
        <td>6</td>
        <td class="right">ICON</td>             
        <td>12 Angry Men</td>
       <td>1957</td>
    </tr>
    <tr>
        <td>7</td>
        <td class="right">ICON</td>             
        <td>Schindler's List</td>
        <td>1993</td>
   ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    /* Improves handling of kerning pairs and ligatures */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: rgba(56,44,38,.2);
    margin: 20px;
}

menu, ul, li {
 list-style-type: none;   
}

menu {
    margin: 0px;
    padding: 0px;
}

.settings-menu {
 width: 250px;
 background: #fefefe;
 border: 1px solid rgba(0,0,0, .262);
 border-radius: 5px;
 font-size: 12px;
 color: #212121;
 text-shadow: 0 1px 0 rgba(255,255,255, 1);
 box-shadow: 0 12px 15px rgba(0,0,0, .258);
 -moz-background-clip: padding;
 -webkit-background-clip: padding;
 -o-background-clip: padding-box;
 -ms-background-clip: padding-box;
 -khtml-background-clip: padding-box;
 background-clip: padding-box;
}

.settings-menu ul {
}

.settings-menu ul li {
    padding: 6px;
    padding-left: 20px;
    height: 12px;
    line-height: 10px;
}
.settings-menu ul li menu {}

.settings-menu ul li.hr {
height: 1px;
background: rgba(226,226,227,1);
margin: 0px;
padding: 0px;
border: none;
}

.settings-menu ul li.selected {
 color: white;
 text-shadow: none;
 border-bottom: 1px solid rgba(23,88,231,1);
 border-top: 1px solid rgba(90,130,235,1);
 background-color: #5a82eb;
background-image: -webkit-gradient(linear, left top, left bottom,...