Keeping Top Level Menu in Hover State When Moving Down to Sub Menus

Keeping Top level menu in hover state when moving down to sub menus?

Change the selector from

#nav > li > a:hover

to

#nav > li:hover > a

And

#nav li ul li a:hover

to

#nav li ul li:hover > a

CSS Menu - Keep parent hovered while focus on submenu

You hould be able to change this

.primary-navigation ul li a:hover { 
    background: #f39cbd;
}

to this

.primary-navigation ul li:hover a { 
    background: #f39cbd;
}

This way the color of your main nav item is changed when you hover over the parent li. Since the submenu should also be inside this li, the hover will still be triggered when moving over the submenu, an so the color of the link should also keep it's hover state.

PURE CSS DROP DOWN MENU - Unable to keep top li highlighted when hovering over sub-menu

Change #nav > li a:hover to #nav > li:hover a in your CSS.

Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.

Make a hover state remain while hovering on submenu items

Add $(this).addClass('hover'); to your hover enter function and $(this).removeClass('hover'); to your hover out function and add li.hover{/* css specific to it */} to your CSS.

        $curobj.hover(
            function(e){
                var $targetul=$(this).children("ul:eq(0)")
                                    $(this).addClass('hover');
                if ($targetul.queue().length<=1) //if 1 or less queued animations
                    if (this.istopheader)
                        $targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
                    if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                        $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                    $targetul.dequeue().slideDown(droplinemenu.animateduration.over)
            },
            function(e){
                var $targetul=$(this).children("ul:eq(0)")
                                    $(this).removeClass('hover');
                $targetul.dequeue().slideUp(droplinemenu.animateduration.out)
            }
        ) //end hover

Or, if you want a pure CSS alternative. Here is the one I use an every website I make.

nav ul{
    margin-bottom:10px;
    list-style-image:none
}
nav>ul>li{
    display:inline-block;/* float:left needed for some designs */
    font-size:20px;
    text-align:center;
    position:relative;
    z-index:950
}
nav a{
    text-decoration:none;
    display:block;
    color:#000;
    padding:8px 0
}
nav li ul{
    display:none;
    position:absolute;
    padding:0 8px;
    margin:0
}
nav li:hover ul{display:block}
nav li li{
    font-size:15px;
    float:none;
    width:100%;
    z-index:999
}

Note this is a skeleton and is not styled to look pretty.

The HTML is pretty simple as well:

<nav>
    <ul>
        <li><a href="#">top level item</a>
            <ul>
                <li><a href="#">sub-item</a></li>
            </ul>
        </li>
        <li>top level item</li>
    </ul>
</nav>

CSS navigation - won't stay open on sub-item menus as cursor rolls off :hover

Well, here's a workaround : try simply to put some padding at the bottom of your #main-navigation element.
It will provide some space where the cursor will still trigger the :hover state.

#main-navigation {padding-bottom: 20px}

There : http://jsfiddle.net/56cx8zwx/12/

I cleaned a bit your code, some hover rules weren't necessary.

But well, assuming you'll give some styles to your menu (padding to the LIs, etc.), I guess you won't need this.

CSS hover events not being picked up on submenu within a submenu

I ended up rewriting the menu CSS from scratch basically, and it is working now (even with using opacity: 0 and visibility: hidden instead of display: none). I'm not 100% on what the issue was, but I am about 86.239% sure that it was related to the level-1 submenu having the columns property, and break-inside: avoid on its child menu items. The level-2 submenus were children of the level-1 menu items, so I'm guessing the break-inside was affecting those level-2 submenus as well, even though they were position absolute and appeared fine visually. I found a way to keep the same layout using flexbox instead of css columns, and it is working much better.

jQuery hover - sub-menu stay open while the cursor is not hovering, and hides it when you hover

toggle might be a bit vague

Seems like toggle is going the wrong direction for you in some cases, and you want to make sure you let it know when you want it to show and hide explicitly to avoid confusion.

If you use hover for on and off, it shouldn't run into these issues.

You're also toggling .sub-menu and its child .nav-info, you should only need to toggle .sub-menu; the child comes with it.

$('.navigation li').hover(function () {
    $(this).children('.sub-menu').show();//hover on
}, function () {
    $(this).children('.sub-menu').hide();//hover off
});

made a fiddle: http://jsfiddle.net/filever10/kYmfJ/

Keep main nav item hover CSS when hovering over dropdown

Since the .nav-item .dropdown element gets an additional .show class when is clicked, you can maintain the underlined effect with the following css:

.nav-item.dropdown.show > .nav-link::after {
    width: 100%;
}

Alternatively, you could also use this one:

.nav-item.dropdown:hover > .nav-link::after {
    width: 100%;
}

However, as there is a gap between the .nav-link and the .dropdown-menu, the :hover state is not set while the cursor is moving between the menu item and the dropdown.

Keep drop down menu open after hover (CSS)

On the 'a' tag, add a height or padding-bottom to it on hover. Your 'a' tag might need to be positioned absolute so that its height won't affect the height of your header.

Something like the below

.about-dropdown a:hover {
    padding-bottom: 30px; /*height dependent on the gap you want to fill*/
    position: absolute; 
}

Keep parent menu highlighted while hovering over submenus

You're looking for this:

.menu-item:hover > a {
  color: #00a7cf;
}
.sub-menu > li:hover > a {
  color: #fff;
}

Your submenu is inside the "li" tag, so you should take the hover over the "li" which is the parent of all the submenu content, and then style the menu link.

To maintain the structure of your code, it would look something like this:

.menu {
  > li {
    &:hover {
      > a {
        color: #00a7cf;
      }
    }
    .sub-menu > li {
      &:hover > a {
        color: #fff;
      }
    }
  }
}

---

Related Topics