如何在子菜單上添加懸停效果？

Question

我想創建自己的引導html5主題，但我希望一旦子菜單打開添加懸停CSS使用jQuery。我只想讓子菜單懸停。到目前爲止，我已經做到了這一點，但有蔣張關係IM如何添加懸停動作磺酰基到我的子菜單

jQuery的

$(function (event) { 
    $(document).ready(function() { 
     $('.site-menu li:has(ul)').click(function(e) { 
      e.preventDefault(); 
      if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 
       $(this).children('ul').slideUp(); 
      }else{ 
       $('.site-menu li ul').slideUp(); 
       $('.site-menu li').removeClass('active'); 
       $(this).addClass('active'); 
       $(this).children('ul').slideDown(); 
      } 
     }); 
    }); 
}); 

視圖

<div class="site-menubar site-menubar-light site-menubar-light"> 
    <div class="site-menubar-body" style="position: relative;"> 
     <div style="height: 652px; width: 277px;"> 
      <div style="width: 260px;"> 
       <ul class="site-menu"> 
        <li class="site-menu-item"><a href="#"><i class="fa fa-tachometer site-menu-icon" aria-hidden="true"></i> 
         <span class="site-menu-title">Dashboard</span> 
         <div class="site-menu-badge"> 
         <span class="badge badge-success">3</span> 
         </div> 
        </a> 
         <ul class="site-menu-sub"> 
          <li class="site-menu-item"><a href="menu-collapsed.html"><span class="site-menu-title">item 1</span></a></li> 
          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 2</span></a></li> 
          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 3</span></a></li> 
          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 4</span></a></li> 
         </ul> 
        </li> 
        <li class="site-menu-item"><a href="#">item 2</a> 
         <ul class="site-menu-sub"> 
          <li class="site-menu-item"><a href="#">item 5</a></li> 
          <li class="site-menu-item"><a href="#">item 6</a></li> 
          <li class="site-menu-item"><a href="#">item 7</a></li> 
          <li class="site-menu-item"><a href="#">item 8</a></li> 

         </ul> 
        </li> 
        <li class="site-menu-item"><a href="#">item 3</a> 
         <ul class="site-menu-sub"> 
          <li class="site-menu-item"><a href="#">item 9</a></li> 
          <li class="site-menu-item"><a href="#">item 10</a></li> 
          <li class="site-menu-item"><a href="#">item 10</a></li> 
          <li class="site-menu-item"><a href="#">item 12</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    </div> 

Answer 1

嘗試加入這個CSS的樣式表：

.site-menu-sub .site-menu-item:hover { 
    background-color: blue; 
} 

這兩個類之間的空間是有意義的。它表示樣式應該應用於site-menu-sub子元素的類「site-menu-item」的元素。