CSS Menu - Keep Parent Hovered While Focus on Submenu

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.

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;
      }
    }
  }
}

add css to hover menu parent but not child

Try this

.hover-li:hover > a {
  color: blue !important;
}

it only affects direct children

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.

Making my submenu visible while the parent is focused using tab

You should add tabindex='0' property to the .sub-menu element if you haven't to make it focusable. Not all elements are focusable. :focus on <a> tag works because it is focusable as long as it has either href or tabindex attribute. Refer here for more on tabindex.

Edit: I have checked the code and it looks like you want the .sub-menu to stay visible when the links inside it are focused as well. So add this style for that and it should work. You want the left position of the .sub-menu to be 0 as long as the links inside it are focused.

header .navigation > .menu-item-has-children > .sub-menu:focus-within {
  left: 0;
}

css top-menu not staying in hovered style when cursor moved to sub-menus

I asked a friend to take a look at this for me. In ordre to fix the menus I needed to change the javascript that currently animates the sub-menus. Unfortunately, because I'm using a Weebly based template I can't access this code to change it. So looks like a dead-end.

How do I retain hover state on parent navigation element while moving your mouse to the sub menu?

You should make the .navbar-nav>li>a (the thing you are hovering) take up the full height of the navbar since you want the dropdown menu below the navbar.

To easily do this with your code simply move the 10px of margin top and bottom from the .navbar-nav to padding top and bottom of the .navbar-nav>li>a. Then you can remove that margin-top: 10px from the dropdown menu that creates that anti-hovering gap.

/*Navbar styles*/

.nav-element {

  color: white;

}

.navbar-nav {

  margin-left: 20px !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}

.navbar-nav>li>a {

  padding-right: 20px !important;

  padding-left: 20px !important;

  padding-top: 15px !important;

  padding-bottom: 15px !important;

  color: white !important;

  transition: all 0.5s ease;

}

#nav:hover>#nav-details {

  display: block;

  background-color: lightgrey;

}

/*Divider style for sub-menu */

.divider {

  height: 1px;

  margin: 9px 20px;

  overflow: hidden;

  background-color: #e5e5e5;

}

.dropdown-menu {}

.navbar-nav>li {

  margin-top: 5px;

}

/*these css blocks contain style for the arrow on the sub-menu*/

.dropdown-menu:after,

.dropdown-menu:before {

  bottom: 100%;

  left: 80px;

  border: solid transparent;

  content: " ";

  height: 0;

  width: 0;

  position: absolute;

  pointer-events: none;

  margin-top: 10px;

}

.dropdown-menu:after {

  border-color: rgba(211, 211, 211, 0);

  border-bottom-color: #D3D3D3;

  border-width: 10px;

  margin-left: -10px;

  margin-top: 10px;

}

.dropdown-menu:before {

  border-color: rgba(0, 0, 0, 0);

  border-bottom-color: #;

  border-width: 13px;

  margin-left: -13px;

  margin-top: 10px;

}

/*styles for list elements and hover logic */

li {

  color: #fff;

  display: block;

  float: left;

  position: relative;

  text-decoration: none;

  transition-duration: 0.5s;

}

li span a {

  color: #fff;

}

li:hover>a:after {

  background: orangered;

}

ul li ul {

  visibility: hidden;

  opacity: 0;

  position: absolute;

  transition: all 0.5s ease;

  left: 0;

  display: none;

}

ul li:hover>ul,

ul li>ul,

ul li ul:hover {

  visibility: visible;

  opacity: 1;

  display: block;

}

ul li:hover>ul,

/*maintain hover state of parent list in sub menus*/

ul li:focus-within>ul,

ul li ul:hover {

  visibility: visible;

  opacity: 1;

  display: block;

}

ul li ul li {

  clear: both;

  width: 100%;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav id="myNavbar" class="navbar navbar-default" role="navigation" style="background-color:royalblue;">

  <div class="container">

    <div class="navbar-collapse" id="navbarCollapse" style="background-color:royalblue;">

      <ul class="nav navbar-nav">

        <li id="nav" class="nav-element" aria-haspopup="true">

          <a>Harry Potter Books</a>

          <ul id="nav-details" aria-label="submenu" class="dropdown-menu sub-menu">

            <li><a href="#">Sorcerer's Stone</a></li>

            <li class="divider"></li>

            <li><a href="#">Chamber of Secrets</a></li>

            <li class="divider"></li>

            <li><a href="#">Deathly Hallows</a></li>

            <li class="divider"></li>

            <li><a href="#">Goblet of Fire</a></li>

          </ul>

        </li>

        <li class="nav-element" id="ltc-program-nav">

          <a>Books Better than Harry Potter</a>

        </li>

        <li class="nav-element" id="ApplyNowTopLevel">

          <a>Another Funny Link</a>

        </li>

      </ul>

    </div>

  </div>

</nav>

---

Related Topics