CODEWITHSUNDEEP
javascripthtmlcss
Marcelo Noronha
Marcelo Noronha

Reputation: 815

Developing a vertical "UL" menu

I´m developing a "UL" menu. It is a vertical menu. Each link of this vertical menu has a submenu. The menu elements have a onmouseout event, that removes the submenu. The problem I´m facing is:

When I try to access the submenu, the onmouseout event is dispatched before I get into the submenu. There are a space (margin) between the menu and submenu. I believe, that, when the mouse reach this space, the "onmouseout" event is dispatched. What can I do, so the "onmouseout" is not dispatched when the mouse is on this "space" between the menu and the submenu?

Thanks.

PS: I cannot post the code

Upvotes: 1

Views: 300

Answers (4)

Fenton
Fenton

Reputation: 250892

This is how you should structure your HTML, not just to solve your problem but also because it works semantically.

<ul>
    <li>Main Menu Item
    <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
    </ul></li>
    <li>Main Menu Item
    <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
    </ul></li>
</ul>

Note that the sub-menu is inside of the main menu item. This nesting gives it meaning and also means that while you are hovering over the sub menu, you are also still hovering over the main menu item that contains the sub menu.

You can test this with pure CSS such as this:

ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}

See a rough demo of this in action on JS Fiddle

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185913

Here is a simple vertical menu done in CSS:

#menu {
    width: 100px;
    background: #ddd;
    cursor: default;
}

#menu > li {
    padding: 6px;
    border-bottom: 1px solid gray;
    position: relative;
}

#menu > li:hover ul {
    display: block;
}

#menu ul {
    display: none;
    position: absolute;
    width: 100px;
    left: 100px; top: 0;
    background: #eee;
}

#menu ul > li {
    padding: 6px;
    border-bottom: 1px solid #bbb;
}

#menu ul > li:hover {
    outline: 2px solid red;
}

Live demo: http://jsfiddle.net/3xguj/show/

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

What I do in such situations is to have a short setTimeout before removing the submenu, then clear that timeout when the submenu is moused over. This allows enough time for the mouse to get there, without affecting the visuals much, if at all.

Upvotes: 3

Derek
Derek

Reputation: 4931

Try viewing the element in the inspector (using chrome or firebug) and reset all of the UL and LI css attributes. This would eliminate the spacing.

P.S. If you cannot post THE code, at least post SOME code which functions the same way and has the same issue.

Upvotes: 0

Related Questions