将鼠标悬停在子元素CSS上时，保持父对象处于活动状态

Question

I'm trying to keep parent element active, when hover on it's child element. This is my code.

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

Can anyone help me how can i achieve this? Thanks is advance.

Answer 1

I would suggest to match the hover action to the "li" parent element instead of the "a" tag, in that way you can also match the children, just like the example

 .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

As your .dropdown-menu is a child of the li you're hovering,
there is no need for your last lines of CSS code.

Here is a working snippet of what I think you try to achieve:

 .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> 

Hope it helps.

Answer 3

Just add some CSS as given below. Hope this will help you.

 .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> 

You can also check this https://jsfiddle.net/kdwcbpy9/