Drop down menu child element has to be displayed

I’m using simple jQuery dropdown menu

<script type='text/javascript'>
             jQuery(document).ready(function() {
             jQuery("#dropmenu ul").css({display: "none"});
             jQuery("#dropmenu li").hover(function(){
                jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
                },function(){
                jQuery(this).find('ul:first').css({visibility: "hidden"});
             });
    });
    </script>


What I need is: when someone clicks on submenu that element would be stay displayed under parent element… Any suggestions would be appreciated, I did google it, can’t find anything… Thanks.

Under what conditions do you want the submenu to remain displayed?

When they go to a related page?
When they go to the home page?
When they come back to your web site?
When they have closed your web site, left work, gone home to eat, make love and sleep, and the next morning revisit your web site from their home?

while they have submenu page open

Will you want it to stay open after they have clicked through to a different page on your web site?

It seems that what you are wanting is for the submenu that happens to be open, to be remembered from one page to the next.

What is typically used for this situation is to use cookies.

You can set a cookie called submenu and have its mane be the appropriate name or number, so that the next time your code runs it can read the submenu cookie and take appropriate action depending on what is in there.

I’m not sure if cookies is the right technique… Only active page title (submenu) has to be visible, so when they click on other menu titles previous one won’t be visible.

So you are wanting the page itself to specify which submenu remains open, rather than the one that the user clicks on.

In that case, you can specify the type of page as a part of the body


<body id="contactus">

And place a similar (not the same) identifier on each sub menu


<ul id="menu">
    <li id="aboutusmenu"><a href="aboutus.html">About Us</a></li>
    <li id="contactusmenu"><a href="contactus.html">Contact Us</a></li>
</ul>

Now you can use CSS to style the appropriate sub menu, so that on the contact us page, the nav link for the contact page can receive special treatment. And likewise for the other pages.


#aboutus #aboutusmenu { font-weight: bold; }
#contactus #contactusmenu { font-weight: bold; }

Only after getting this base level working as it should, should you step on in with scripting.

With scripting you can now easily find the appropriate submenu link and make it visible, then step up through the menu structure making each parent menu visible until you reach the top menu.

With scripting you can now easily find the appropriate submenu link and make it visible

Couldn’t that also be done with CSS? I know it’s not a CSS menu to begin with, but would be more accessible if it were.

Yes it could. This depends on how the OP wishes to handle this situation. It may be more effort for him than it’s worth to take things to a full CSS solution for his menu.

With the css solution he could set the display of the submenu items to none, and use the declaration for the menu item on the specific page to override the display, so only the current page has its submenu shown.

It’s a good thing that he now has a solid foundation for his menus. With it his options now open up quite nicely.