使用Javascript Jquery在鼠标上显示主项上方的子项

我有下面给出的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

假设子菜单被隐藏：

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

---

这是正在工作的

Toress PAMUD及其工作，但当它在主要项目上显示子项目时。。。

 $('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.
});