Question

During implementing Menu control using jquery and css I got the following issue:

Here is live demo I’ve created to show my current problem

When I hover, for example, on ‘Menu Item 1’ this item has changed style (background: white;) and it’s ok, but when I want to cross it’s children (Sub Menu Item 1, Sub Menu Item 2 etc.) Menu Item 1 must keep background: white; but it doesn’t work in my example.

Also, when hover on Menu Item 2, previous style of menu item (Menu Item 1) should be changed to default.

Does anybody know how to solve this?

Here is the code from the fiddle in case of link-rot:

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>​

Script

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 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;​

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;*/
}​

Answer 1

The problem is in your css. you have the following declared:

#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);
}

Just change that to:

#jsddm > li:hover > a, #jsddm > li:hover > ul 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);
}

and it works.