需要<；的jQuery选择器；ul>；在悬停的；李>；

以下是我的XHTML代码：

<ul id="MenuBar1">
  <li>
    <div class="menuBox">Category 1</div>
  </li>
  <li class="hasasubmenu">
    <div class="menuBox">Category 2</div>
    <ul>
      <li><a href="link.html">Link 1</a></li>
      <li><a href="link.html">Link 2</a></li>
      <li><a href="link.html">Link 3</a></li>
    </ul>
  </li>
  <li class="hasasubmenu">
    <div class="menuBox">Category 3</div>
    <ul>
      <li><a href="link.html">Link</a></li>
      <li><a href="link.html">Link</a></li>
    </ul>
  </li>
  <li>
    <div class="menuBox">Category 4</div>
  </li>
</ul>

第一类


第2类







第3类






第4类

实际上，我想制作一个带有悬停交互的菜单来显示子链接。（无论如何，标准菜单：））

这是我的JS代码：

/* menu handler */
$(document).ready(function(){
  $('#MenuBar1 li.hasasubmenu').hover(function(){
    **(selector that select the sub <ul> of the hovered <li>)**.toggle();
  });
});

/*菜单处理程序*/
$（文档）.ready（函数（）{
$（'#MenuBar1 li.hasasubmenus'）。悬停（函数（）{
**（选择悬停
的子
的选择器）**.toggle（）；
});
});

您能帮我找到用于切换的选择器（JS代码中的粗体（**）吗？

或

---

示例：

为什么要为此使用jQuery？您可以仅使用CSS来完成此操作

---

我应该只使用CSS，因为有些用户/浏览器不支持JS。

非常感谢！完美：）你让我发现了JSFIDLE！这将对我帮助很大！！谢谢你，伙计！。。。还有一些浏览器不支持

：将
悬停在
a
元素以外的任何元素上。
/* menu handler */
    $(document).ready(function(){
      $('#MenuBar1 li.hasasubmenu').hover(function(){
        $(this).children('ul').toggle(); // select the ul
      });
    });

<ul>
   <li>List Item 1</li>
   <li>List Item 1
      <ul>
         <li>List Item 2</li>
         <li>List Item 2
      </ul>
   </li>
</ul>

ul {
        list-style: none;
        width: 150px;
        }

li {
        position: relative;
        border: 1px solid #ffffff;
        }

li:hover {
        z-index: 1;
        cursor: pointer;
        }

ul ul {
        position: absolute;
        display: none;
        left: 140px;
        top: 4px;
        }

li:hover ul ul {
        display: none;
        }

li:hover ul, li:hover li:hover ul {
        display: block;
        }