jquery Menu

Current example shows you how to implement menu using jquery and css

HTML

<ul id="jsddm">
    <li><a href="#">Menu Item 1</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 2</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
            <li><a href="#">Sub Menu Item 4</a></li>
            <li><a href="#">Sub Menu Item 5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 3</a>
        <ul>
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
            <li><a href="#">Sub Menu Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu Item 4</a></li>
</ul>

CSS

/* menu styles */
#jsddm
{
    margin: 0;
    padding: 0;
    float: left;
    background: #4370b6;
    width: 100%;
}

#jsddm > li
{
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    background: #4370b6;
    padding: 0 5px;
}

#jsddm > li a
{
    display: block;
    padding: 0 15px;
    text-decoration: none;
    color: #FFF;
    white-space: nowrap;
    height: 62px;
    line-height: 60px;
}

#jsddm > li a:hover
{
    background: #FFF;
    color: #4370b6;
    padding: 0 15px;
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
    box-shadow: 0 3px 5px rgba(0,0,0,17);
}

#jsddm li ul
{
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
}

#jsddm li ul li
{
    float: none;
    display: inline;
    width: auto;
    background: #0b0b0b;
    color: #FFF;
}

#jsddm li ul li a
{
    height: 40px;
    min-width: 240px;
    border-bottom: 1px solid #e9e9e9;
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,17);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,17);
    box-shadow: 0 3px 5px rgba(0,0,0,17);
    background: #FFF;
    color: #0b0b0b;
    text-align: left;
    line-height: 40px; /* IR Fix */
}

#jsddm li ul li a:hover
{
    /*background: #4370B6;
    color: #FFF;*/
}

JavaScript

var timeout = 200;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open() {
    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
}

function(){
if (k<= "true")
closerset();
}

}

function jsddm_close()
{ if (ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout); }

function jsddm_canceltimer() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

$(document).ready(function () {
    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout', jsddm_timer);
});

document.onclick = jsddm_close;