Grow your CSS skills. Land your dream job.

Have a clickable menu show the submenu and mouseOut Hides it

  • # October 17, 2012 at 4:09 pm

    This is gonna be a long explanation and I am very new to this so bear with me …
    I am trying to create a vertical menu that displays a submenu when the main list Item is clicked. I have gotten everything to work minus the mouseOut/mouseLeave part. It seems that my submenus are in an absolute position which is located on/behind the main menu item. I guess it starts there but when the page is loaded I have some javascript to decide it’s location so that no matter the resolution the submenu is always to the right of the main menu. This is the code:
    $(“#navMenu li li”).css(“left”,$(“#navMenu”).css(“width”));
    So when I click the mainMenu the sub menu appears but if I move to where the submenu “starts” before the page is loaded the submenu will go away.
    I have tried an if statement such as to have the submenu stay up if the mouse is either on the main component of its submenu. I have no idea if you can even do this with javascript..
    $(“#AboutUs, this”).bind(‘mouseleave’,function(){if($(“ul #SubLayerAboutUs”).mouseout()){ $(“ul #SubLayerAboutUs, this”).css(“visibility”,”hidden”);
    I am really new at this so any help/direction would be greatly appreciated!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".