YQL/YUI3/Twitter example

by envira

HTML

<ul id="quotes-bar-menu">
    <li class="dropdown">
        <a class="dropdown-link" href="#">Investing Tools</a>
        <div class="sub-menu investing">
            <ul>
                <li>
                    <h2>Find and Monitor</h2>
                </li>
                <li><a href="#">» Guru Screener/Analysis</a></li>
                <li><a href="#">» Heatmaps</a></li>
                <li><a href="#">» Stock Screener</a></li>
                <li><a href="#">» Stock Widget</a></li>
            </ul>
            <ul>
                <li>
                    <h2>Tools for AAPL</h2>
                </li>
                <li><a href="#">» Analyst Info</a></li>
                <li><a href="#">» Insider Holdings Summary</a></li>
                <li><a href="#">» Stock Consultant</a></li>
                <li><a href="#">» Stock Report</a></li>
                <li><a href="#">» Stock Comparison</a></li>
            </ul>
        </div>                
    </li>
    <li class="dropdown">
        <a class="dropdown-link" href="#" class="tracking">Tracking Tools</a>
        <div class="sub-menu single">
            <ul>
                <li>
                    <h2>Select a tool to begin tracking your stock</h2>
                </li>
                <li><a href="#">» Portfolio Tracking</a></li>
                <li><a href="#">» Ticker</a></li>
                <li><a href="#">» Alerts</a></li>
            </ul>
        </div>                
    </li>
</ul>

CSS

a.dropdown-link { 
    color:#044264;
    font-size:11px;
    font-weight:bold;
    text-decoration:none; 
}

ul#quotes-bar-menu {
    margin: 0; padding: 0;
    float:left;
    width: 100%;
    list-style: none;
    font-size: 1.1em;
}

ul#quotes-bar-menu li {
    display:inline;
    float:left;
    position:relative;
    margin:0;
    padding:7px 15px 7px 0;
}

/* sub menu class */
ul#quotes-bar-menu li .sub-menu {
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    background:none repeat scroll 0 0 #ECF3F9;
    border-color:-moz-use-text-color #C3D3E1 #C3D3E1;
    border-right:1px solid #C3D3E1;
    border-style:none solid solid;
    border-width:medium 1px 1px;
    display:none;
    font-size:11px;
    left:0;
    margin:0;
    padding:0;
    position:absolute;
    top:29px;
    width:320px;
    z-index:999;
}

ul#quotes-bar-menu li .single { 
    width:150px !important;
}

ul#quotes-bar-menu li .sub-menu h2 {
    font-weight:bold;
    color:#044264;
    text-shadow: 0px 1px #fff;
}

ul#quotes-bar-menu li .sub-menu ul {
    float:left;
    width:160px;
    margin:7px 0;
}

ul#quotes-bar-menu li .sub-menu li {
    width:135px;
    margin:0; 
    padding:5px 10px 0;
}

ul#quotes-bar-menu li .sub-menu li a { color: #000; text-decoration: none; }
ul#quotes-bar-menu li .sub-menu li a:hover { text-decoration: underline; }

JavaScript

$(document).ready(function() {
        $(".dropdown").hover(
            function(){
                $(this).children("div.sub-menu").slideDown(200);
            },
            function(){
                $(this).children("div.sub-menu").slideUp(200);
            }
        );
    });