Держите родительский активный, когда наведите курсор на дочерний элемент CSS

Question

Я пытаюсь оставить родительский элемент активным, когда наведите курсор на его дочерний элемент. Это мой код.

<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </u>
</nav>

.desktop-menu .navbar-nav>li>a:hover {
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    position: absolute;
    top: 100%;
    border: none;
    background: #67686b;
    color: #fff;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .dropdown-menu:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}

Кто-нибудь может мне помочь, как мне этого добиться? Спасибо заранее.

Answer 1

Я бы предложил сопоставить действие при наведении курсора с родительским элементом "li" вместо тега "a", чтобы вы также могли сопоставлять дочерние элементы, как в примере

.desktop-menu .navbar-nav>li:hover >a{
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    border: none;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .navbar-nav>li:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}

<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </u>
</nav>

Answer 2

Поскольку ваш .dropdown-menu - ребенок от li, который вы парите,
вам не нужны последние строки кода CSS.

Вот рабочий фрагмент того, чего, я думаю, вы пытаетесь достичь:

.desktop-menu .navbar-nav>li>a:hover {
  color: #fff;
  background: #67686b;
}

.desktop-menu .dropdown-menu {
  display: none; /* Hidden by default */
  min-width: 220px;
  /* removed below
  position; absolute
  top: 100%; */
  border: none;
  background: #67686b;
  color: #fff;
  box-shadow: none;
}

.desktop-menu li:hover .dropdown-menu {
  display: block; /* Appear when hovering */
}

.desktop-menu .dropdown-menu li a:hover {
  color: #FBB914;
}

/* You don't need this code
.desktop-menu .dropdown-menu:hover .desktop-menu .navbar-nav>li>a {
  color: #fff;
  background: #67686b;
}*/

<nav class="desktop-menu">
  <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>
      <ul role="menu" class="dropdown-menu sub-nav">
        <li><a title="Energy" href="#">Energy</a></li>
      </ul>
    </li>
  </ul>
</nav>

Надеюсь, это поможет.

Answer 3

Просто добавьте немного CSS, как указано ниже. Надеюсь, это поможет вам.

.desktop-menu .navbar-nav>li>a:hover {
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    position: absolute;
    top: 100%;
    border: none;
    background: #67686b;
    color: #fff;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .dropdown-menu:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}
.navbar-nav li{
  position: relative;
}
.navbar-nav li ul{
  display:none;
}
.navbar-nav li:hover ul{
  display:block;
}
.navbar-nav li:hover a{
  color:#fff;
  background: #67686b;
}

<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </ul>
</nav>

Вы также можете проверить это https://jsfiddle.net/kdwcbpy9/