css hover drop down menu disappears when trying to select menu option

Deo Source

I have been searching for a fix for my code for a while now.

I have a drop down menu that displays the content of the menu after you hover over a static object, however when you attempt to select one of the items (you move your mouse off of the static object) the items disappear (are set back to display: none)

my code is as follows:

HTML:

<div id="menuContainer">
    <div class="menuItem first">
        <div class="settingsIcon"></div>
        <div class="text">Account Settings</div>
        <div class="downArrowIcon"></div>
    </div>
    <div id="settingsMenu">
        <div class="menuItem">Manage clients</div>
        <div class="menuItem">Manage specials</div>
        <div class="menuItem">Manage users</div>
        <div class="menuItem">Logout</div>
    </div>
</div>';    

CSS:

div#menuContainer div:hover + div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

div#menuContainer div#settingsMenu{
    display: none;
    width: 100%;
}

Any help would be greatly appreciated.

cssdrop-down-menu

Answers

answered 5 years ago Steve #1

Have you tried adding:

div#settingsMenu:hover{display: block;}

Haven't tested it, but it seems like that would work.

answered 5 years ago PlantTheIdea #2

You need to make sure the display:none; section is above the hover section (because its read top-down, you want priority appropriately), but also to have display:block; when hovering over the settingsMenu itself.

The code:

#settingsMenu{
    display: none;
    width: 100%;
}

#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
    display: block;
    position: relative;
    z-index: 100;
}

Here is a jsFiddle to show.

answered 5 years ago braican #3

All you have to do is attach the :hover state to the div:menuContainer, rather than the divs inside. Also, you don't need the +

The following should work:

#menuContainer:hover div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

EDIT: below is a CodePed illustrating the above:

http://codepen.io/braican/pen/yIjLs

answered 5 years ago mojarras #4

You could also do this using lists instead of divs, which is much cleaner and can be extended for submenus easily. Here is a sample:

<html>
    <head>
        <style type="text/css">
            nav ul ul {
                display: none;
            }

            nav ul li:hover > ul {
                display: block;
            }
            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <div class="settingsIcon"></div>
                    <div class="text">Account Settings</div>
                    <div class="downArrowIcon"></div>
                    <ul>
                        <li>Manage clients</li>
                        <li>Manage specials</li>
                        <li>Manage users</li>
                        <li>Logout</li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>

comments powered by Disqus