Question

I am trying to create a dropdown menu. It working well. I want the top menu when hovered truns into white color. when moving down to the submenus, the top menu should stay in white color. But the top menu turns into its normal original color.

How to keep the parent menu hovered while moving mouse in the submenus.

The code is here:

HTML

 <ul id="jsddm" class="menu_nor_cont">
         <li style="margin-left:15px;"><a href="#">Home</a>
        <li><a href="#">Job Seeker Login</a>

        </li>
        <li><a href="#">Post Resume</a>
        </li>
        <li><a href="#">Search jobs<span style="margin-left:5px;"><img src="images/down.png"  style="width=15px; height=8px;"></span></a>
            <ul>
                <li><a href="#">Advanced Search</a></li>
                <li><a href="#">Jobs by Company</a></li>
                <li><a href="#" style="border-bottom:none;">Jobs by category</a></li>
            </ul>
        </li>
        <li><a href="#">Employer Login</a></li>
        <li><a href="#"  style="border-right:none;">Post Job</a></li>
    </ul>

JS

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

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').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

#jsddm
{   margin: 0;
    padding: 0;


}

    #jsddm li
    {   
        float: left;
        list-style: none;

    }

    #jsddm li a
    {   display: block;
        padding: 5px 12px;
        padding-left:15px;
        padding-right:15px;
        text-decoration: none;
        border-right: 1px solid #DBDBDB;
        padding-bottom:6px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {   
        background-color:#FFF;
        color:#000;

    }

        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border:#3895C0 1px solid;
            border-top:none;

            z-index:1001;
            margin-left:-2px;
        }

        #jsddm li ul li
        {   float: none;
            display: inline;
            margin:0px;


        }

        #jsddm li ul li a
        {   width: auto;
            background: #fff;
            color:#080CB2;
            font-weight:normal;
            font-size:11px;
            border-bottom:1px solid #CCC;
            text-decoration:none;
            width:180px;
        }

        #jsddm li ul li a:hover
        {

            text-decoration:underline;
            color:#080CB2;
        }

Answer 1

The problem it is due to the “hover” state being in CSS, so when you leave the “a” element you loose the hover state.

a couple modifications to your code should make this work.

            function jsddm_open() {
                jsddm_canceltimer();
                jsddm_close();
                ddmenuitem = $(this).find('ul').css('visibility', 'visible');
                $(">a", $(this)).css("background-color", "#FFF");
            }

           function jsddm_close() {
                if (ddmenuitem) {
                    ddmenuitem.css('visibility', 'hidden');
                    $(ddmenuitem).prev().css("background-color", "");
                }
            }

NOTE: you are also missing a ending li tag in the code posted