How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

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

score 4 · Answer 1 · edited May 23 '17 at 12:30

4

I dont' see why you need to use JS here. I've seen too many examples of people trying to make simple drop down menus that just haven't taken the time to use proper HTML structure and use CSS to manipulate the elements.

Unless you really want to have some sort of animation (yet again you can use CSS3 transform to do animating) then I would suggest using this answer I gave to another user who had a drop down problem awhile back.

CSS drop-down menus pushing page content down

The link above gives you a very quick, straight forward example of a HTML+CSS drop down solution. Using this example you can achieve what your looking for by keeping the parent link "selected" all with just HTML and CSS.

Edit:

To speak to your problem directly. All you have to do to fix your issue is set your CSS a bit differently.

Change:

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

To:

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

As you can see, I'm selecting the li element to use the :hover pseudo selector instead of the a tag. This is because you wrap the sub menu ul within this tag. So technically it's the parent element.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 23 '10 at 17:18

darcy

465
2
8

Thanks friend, But still i want to know the problem – Rajasekar Jun 23 '10 at 17:20
Lik @Kumu has stated, technically you aren't "hovering" over that parent element anymore in your example. The best way to correct this is to properly wrap your child elements within the parent and then when you are "hovering" those child elements you will still, technically, be hovering the parent. Thus, the state of your link will stay white. This is something I address in the linked HTML + CSS example. I use lists: ul > li to accomplish this parent to child effect – darcy Jun 23 '10 at 17:39
@clarke78: I'm with you 100% on this one - so much so, I've deleted my now redundant answer:-) I posted a similar example the other day, which may also prove useful: http://stackoverflow.com/questions/3085712/horizontal-css-subnav-issues/3091554#3091554 – Mike Jun 23 '10 at 17:44
I also think CSS is also better then a JS solution, but sadly ":hover" only works on "a" elements for IE6... but if one doesn't care about IE6, go this route – Kumu Jun 23 '10 at 17:53
1

As just pointed out by Kumu, IE6 (and I think IE7) only support the `:hover` pseudo class on the `a` tag. To get round this, I use [Son of Suckerfish](http://www.htmldog.com/articles/suckerfish/dropdowns/ "Son of Suckerfish"). It's never let me down, and I am reasonably confident that those using IE6 won't be blocking Javascript. – Mike Jun 23 '10 at 17:53
I added an update to give you the real answer to your question. Sorry for beating around the bush but I think most developers would want to steer you in the right direction first, which is why I tried suggesting a complete HTML + CSS version. Hope you enjoy the fix :) – darcy Jun 23 '10 at 19:32

score 1 · Accepted Answer · answered Jun 23 '10 at 17:31

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

How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

2 Answers2

Linked