即使在悬停后，悬停在图标上也会使显示可见

Question

I'm trying to make a dropdown menu with selectable links. I'm using a gear icon to hover over for a dropdown menu to appear.

Currently, I have a li in a ul as follows:

<li id="gear-btn">
    <i class="fas fa-cog"></i>
    <ul id="gear-dropdown" class="gear-dropdown hidden">
    <li>
        <ul class="editions">
            <span class="dropdown-subtitle">Edition</span>
            <li><a href="#">CSS</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">Ruby</a></li>
        </ul>
    </li>
    <li>
        <span class="dropdown-subtitle">Help</span>
        <ul class="help">
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </li>
</ul>
</li>

and my CSS is:

#gear-btn {
    position: relative;
}

#gear-btn:hover .gear-dropdown {
        display: block;
}

.gear-dropdown {

    position: absolute;
    right: 5px;
    display: none;
    width: 200px;
    z-index: 100;
    border: 1px solid black;

}

Now what's strange is, if I hover over the gear icon, the menu drops below it, but even when I scroll over the menu, it remains visible until my cursor is off of the .gear-dropdown li . This is not what I would expect, since it should only be visible when I'm hovering over the gear icon based on the css (I don't have a .gear-dropdown:hover selector). It is the desired effect, but I'm trying to learn CSS and figure out why this is happening.

Thanks!

Answer 1

This is happening because the mouseover even bubbles up to all the parent elements. So when the mouse is over the dropdown, the hover is applied for the parent element(#gear-btn) as well, which in turn applies the class #gear-btn:hover .gear-dropdown . It's not possible to block event bubbling using css.

In order to show the dropdown only on hovering the icon, you can either change the class as below:

#gear-btn:hover .gear-dropdown:not(:hover) {
    display: block
}

Or, as below

#gear-btn > i:hover + .gear-dropdown {
    display: block;
}

Answer 2

So, you have a cog icon. When you hover over gear-btn element it shows a dropdown menu. Please consider that this whole element - cog icon + dropdown menu have a single parent which is <li id="gear-btn"> . Even when you hover over its children you are still hovering over <li id="gear-btn"> .