Dropdown Menu Style that shows tweets!

This is a cool prototype of dropdown menu for glancehere, that shows tweets inline

by kizer

HTML

<script src="http://github.com/kerberoS/jQuery-Tweets/raw/master/js/jquery.tweets.0.1.js"></script>
<ul id="menu">
    <li>My Profile…</li>
    <li>&#9733; Impersonate User…</li>
    <li>&#9733; View User Stats…</li>
    <li>&#9733; Test Signup Process…</li>
    <li>&#9733; Search Mail Server…</li>
    <li>Update…</li>
    <li>Fork</li>
    <li>Reset</li>
    <li>Set As Base</li>
    <li>Tidy Up</li>
    <li>JSLint</li>
    <li>Messages<aside>220</aside></li>
    <li id="inkhead">&#9733; Tweets @inkhead</li>
    <li id="mantia">&#9733; Tweets @mantia</li>
    <li id="dumfuq">&#9733; Tweets @dumfuq</li>

    <ul id="tweets">
    </ul> 
    <li>Search<input type="text" class="full-search" placeholder="search…"></li>
    
</ul>

CSS

body {
    -webkit-user-select:none;
    background: #888;
    padding:0;margin:0;
    margin-left:10px;
    background : #c6c9cc url(http://recurly.com/images/changelog/bg-site-noise.png) no-repeat center top;
    height: 100%; /* this is needed to stretch the gradient */
    background: #c6c9cc -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#e2e2e2), to(#c6c9cc)) no-repeat;
    background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#e2e2e2), to(#c6c9cc));
}

ul#menu {
    z-index:1;
    position:relative;
    left:0px;
    top:0px;
    width: 250px;
    background: #f9f9f9;
    background: rgba(255,255,255, .6987);
    /* background: rgba(0,0,0, .4987); */
    border-radius: 6px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    border: 1px solid #333;
    padding: 0px;
    color: #2a2a2a;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size:13px;
    text-shadow: #FFF 0px 1px 0px;
    -webkit-box-shadow:
        rgba(0,0,0, .389) 0px 1px 10px;
    border-top: 0;
}

li {
    position:relative;
    padding: 10px;
    border-bottom:1px solid rgba(0,0,0, .1629);
    -webkit-box-shadow:
        rgba(255,255,255, 1.0) 0px 1px 0px inset;
    font-weight: 700;    
}

li aside {
    display:inline;
    position: absolute;
    right:20px;
    background: red;
    color:#FFF;
    border-radius:8px;
    padding: 2px 5px;
    font-size:.8em;
    font-weight: 700;
    border:1px solid rgba(0,0,0, .1698);
    text-shadow: none;
    -webkit-box-shadow:
        rgba(255,255,255, .3698) 0px 1px 0px inset;
}


li:hover {
    background: rgba(191,83,229, 1.0);
    color: #FFF;
    text-shadow: none;
    border-bottom:1px solid rgba(157,69,188, 1.0);
    -webkit-box-shadow:
        rgba(157,69,188, 1.0) 0px 1px 0px inset;  
    
    
    background:rgba(157,69,188, 1.0);
    background-image: 
       ...

JavaScript

$('#tweets').tweets({
    tweets: 20,
    username: "inkhead"
});