html/javascript hover menu

Question

I have already got a nav menu at the top of my page, but now I am trying to expand a sub menu when I hover over one of these options. My first idea was to simply have a "div" section of the code like such

<div id= "expanded_menu"> <!-- sub menu option --> </div>

and show/hide it based on whether it's nav option was hovered over, but then I realized that the submenu would disappear as soon as I took my mouse off of it's corresponding nav menu button. Does anyone know a way to hover over an option, have that bring up a menu, and then be able to access the submenu without it disappearing?

Use a script and/or style that's already been developed and implemented. Suckerfish, for instance. — Jared Farrish
– Jared Farrish, Commented Feb 18, 2012 at 16:24
You can achieve this with CSS only, no need for javascript here. Try this tutorial seoconsultants.com/css/menus/tutorial Here's the working example: ago.tanfa.co.uk/css/examples/menu/hs7.html — André Alçada Padez
– André Alçada Padez, Commented Feb 18, 2012 at 16:24

gargantuan · Accepted Answer · 2012-02-18 16:25:50Z

2

The usual way to do this is with nested lists...

<ul id="main-menu">
    <li>
        First menu item
        <ul class="sub-menu">
            <li>Sub menu item</li>
            ...
        </ul>
    </li>

    <li>Second menu item</li>
    ...
</ul>

And use the following CSS.

.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }

answered Feb 18, 2012 at 16:25

gargantuan

8,96416 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Trent · Accepted Answer · 2012-02-18 16:22:44Z

0

As long as the sub-menu is nested in the parent menu item's div, your method should work. So your HTML structure would be:

<div class="main_menu_item">MainItem
    <div class="sub_menu_item">Item1</div>
    <div class="sub_menu_item">Item2</div>
</div>

Then you're still hovering on the main item when hovering on the sub-items.

However, I personally would implement this all in CSS -- search for "CSS menus" and you'll find a ton of resources.

answered Feb 18, 2012 at 16:22

Trent

1099 bronze badges

Collectives™ on Stack Overflow

html/javascript hover menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related