Test

by lasha

HTML

<ul class="primary-nav">
    <li>
        <a href="/about">ABOUT</a>
        <ul class="secondary-nav">
            <li><a href="/about">About</a>
            </li><li><a href="/about/partners">Partners</a></li>
            <li><a href="/about/information-policy">Information Policy</a></li>
            <li><a href="/about/contact-us">Contact Us</a></li>
        </ul>
    </li>
    <li>
        <a href="/data">DATA</a>
        <ul class="secondary-nav" >
            <li><a href="/data/">Search the Tracker</a></li>
            <li><a href="/data/methodology">Methodology</a></li>
            <li><a href="/data/definitions">Definitions</a></li>
            <li><a href="/data/analysis">Analysis</a></li>
            <li><a href="/data/versions">Versions</a></li>
            <li><a href="/data/roadmap">Roadmap</a></li>
            <li><a href="/data/faq">FAQ</a></li>
        </ul>
    </li>
    
    <li><a href="/events">EVENTS</a></li>
    <li><a href="/in-the-news">IN THE NEWS</a></li>
    <li><a href="/publications">PUBLICATIONS</a></li>
    <li><a href="/blog">BLOG</a></li>
</ul>

CSS

ul.primary-nav{
    list-style: none;  
    display: block;
}

ul.primary-nav li{
    float: left;
    margin:5px;
}

.secondary-nav{
    position: absolute;
    display: none;
    background-color:#333;
    color:#FFF;
}
ul.secondary-nav li{
    clear: both;
}

ul.secondary-nav a{
    color:#FFF;
}

JavaScript

$(function() {
    var timer;

    function open() {
        var all = $('ul.secondary-nav'),
            current = $('ul.secondary-nav', this);

        clearTimeout(timer);

        all.not(current).
        stop(true,true).
        slideUp();

        current.slideDown();
    }

    function close() {
        var element = $('ul.secondary-nav', this);
        timer = setTimeout(function() {
            element.slideUp();
        }, 1000);
    }

    var allHeights = '';
    var theHeight = '';
    $('ul.secondary-nav').each(function(id, item) {
        theHeight = $(item).height();  
        allHeights += theHeight + '\n' ;  
    });
    alert(allHeights);
    
    $('ul.primary-nav > li').hover(open, close);
});