Home/ Questions/Q 5998693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:26:32+00:00

I put together a simple drop-down navigation that expands when you hover over a

  • 0

I put together a simple drop-down navigation that expands when you hover over a link.

When hovering over a link an absolute positioned div will expand, revealing the sub-navigation. My problem is that this div doesn’t collapse automatically when the mouse leaves the navigation area, and that’s what I need to happen.

I’ve added onMouseover commands to the other links in the navigation that will collapse the div when activated, but the functionality that I really need is for the drop-down div to collapse when the mouse leaves the div area.

I greatly appreciate any help with this.

——EDIT——-

Thanks for the help @Tuanderful. I solved this problem in an inelegant (yet effective) fashion.

I simply added the onmouseover event with a close trigger to the divs immediately below and above the navigation. This way when a user’s cursor leaves the drop-down navigation, the trigger fires and the drop-down closes automatically.

I agree that a pure CSS approach would have been ideal, but due to some other complications with this navigation I had to go with the Javascript solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of making #subnav1 a sibling of #nav, you can try make div#subnav1 a nested list; your nav structure would look like:

    <ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>

    Then you can use CSS (instead of javascript) to control the hiding and showing of the sub-nav. This can be done with the :hover pseudo-selector.

    The approach is to initially hide the submenu with

    ul ul { display: none }

    When the user mouse’s over the main menu’s items, use the :hover selector to display the sub-menu

    li:hover ul { display: block }

    If you decide to change the HTML structure you may need to continue to refine your CSS/images appropriately for everything to fall into place.

    A good resource that goes into this approach in further detail can be found at A List Apart: Horizontal DropDowns. An even more robust example (and slightly different approach) can be found at this CSS Wizardry article on Creating a Pure CSS Dropdown Menu

    • 0