在mouseover主項目上顯示子項目使用Javascript jquery

Question

我有像下面給出的html。我需要在鼠標懸停主要項目上顯示子菜單項。我在這裏給出了我的示例html內容。

<ul class="dropdown-menu" role="menu"> 
    <li data-submenu-id="submenu-patas"> <a href="#">Books & Audible <span style="float:right; padding-left:10px; padding-top:2px;"><i class="fa fa-angle-right"></i></span></a> 
        <div id="submenu-patas" class="popover nav_bg_books"> 
        <h3 class="popover-title">Books & Audible</h3> 
        <ul style="float:left; z-index:999; "> 
         <h5 style="color:#C30">Books</h5> 
         <li><a href="products.html">Books</a> </li> 
         <li><a href="products.html">Textbooks</a></li> 
         <li><a href="products.html">Magazine</a></li> 
        </ul> 
        <ul style="float:left; z-index:999;"> 
         <h5 style="color:#C30">Audible</h5> 
         <li><a href="products.html">Audible Audiobooks</a></li> 
         <li><a href="products.html">Books with Audio Companions</a></li> 
        </ul> 
        </div> 
       </li> 
    <li data-submenu-id="submenu-snub-nosed"> <a href="#"> Movies, Music & Games <span style="float:right; padding-top:2px;"><i class="fa fa-angle-right"></i></span></a> 
        <div id="submenu-snub-nosed" class="popover nav_bg_games"> 
        <h3 class="popover-title">Movies, Music & Games</h3> 
        <ul style="float:left; z-index:10; "> 
         <h5 style="color:#C30">Movies & TV</h5> 
         <li><a href="products.html">DIGITAL MUSIC</a></li> 
         <li><a href="products.html">Musical Instruments</a></li> 
        </ul> 
        <ul style="float:left; z-index:10;"> 
         <h5 style="color:#C30">Games</h5> 
         <li><a href="products.html">Video Games</a></li> 
         <li><a href="products.html">Digital Games </a></li> 
        </ul> 
        </div> 
       </li> 
    </ul> 

我有html標籤喜歡上面。我需要顯示

<div id="submenu-snub-nosed" class="popover nav_bg_games">...</div> 

標籤內容時，我鼠標移到

書籍&聲音

使用jQuery或JavaScript？任何幫助PLZ

Answer 1

假設子菜單隱藏：

$('ul.dropdown-menu > li') 
.mouseover(function() { 
    $('.popover.nav_bg_games').show(); 
}) 
.mouseout(function() { 
    $('.popover.nav_bg_games').hide(); 
}); 

Answer 2

$('ul.dropdown-menu > li') 
.mouseover(function() { 
    $(this).children('.popover').show(); // find the children with class .popover of hovered item and show it. 
}) 
.mouseout(function() { 
    $(this).children('.popover').hide(); // find the children with class .popover of hovered item and hide it. 
}); 

這裏是工作plunker