title: Keep parent active when hover on the child element CSS
body: <p>I'm trying to keep parent element active, when hover on it's child element. This is my code.</p>
  
  <pre><code>&lt;nav class="desktop-menu"&gt;
     &lt;ul class="navbar-nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a title="Business Lines" href="#"&gt;Business Lines&lt;/a&gt;    
         &lt;ul role="menu" class=" dropdown-menu sub-nav"&gt;
           &lt;li&gt;&lt;a title="Energy" href="#"&gt;Energy&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/li&gt;    
     &lt;/u&gt;
  &lt;/nav&gt;
  
  .desktop-menu .navbar-nav&gt;li&gt;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&gt;li&gt;a{
      color: #fff;
      background: #67686b;
  }
  </code></pre>
  
  <p>Can anyone help me how can i achieve this? 
  Thanks is advance.</p>