CSS/Jquery显示隐藏子菜单

仍在尝试了解jQuery，我需要一些关于侧边栏列表的帮助

在尝试了一些东西之后，我正在编辑这个

我试图隐藏子菜单，直到鼠标移到特定列表项上，然后另一个菜单出现在侧边栏的一侧，您可以将鼠标移到这些选择上。我已经走到一半了，但当你鼠标移走它时，它会在你鼠标移过任何物品之前消失。我将添加hoverIntent，但我不认为这是问题所在，因为我需要整个隐藏块也成为显示该元素的触发器。我尝试了下面的Steerpikes解决方案，但它导致鼠标退出后整个主列表消失

现在的结构如下：

<ul>
<li>Always Showing Element</li>
<li class="trigger">Title that triggers Submenu
<ul>
<li>
Hidden Menu
</li>
</ul>
</li>
</ul>

那么，当我的鼠标在li.ul li元素上时，如何保持它的显示

谢谢你的帮助

---

无所谓。。。现在可以了，我刚刚取消了定位，但现在它有点重叠，再加上一点延迟就没有问题了。

下面的操作应该可以。我3分钟前刚刚写了一篇类似的文章：）

$（'#menu li'）。悬停（函数（）{
$（this.find（'ul'）.show（）；
},
函数（）{
$（this.find（'ul'）.hide（）；
});

---

记住有两个参数——当鼠标进入时，当鼠标退出时会发生什么。

< P>你可能会发现将根元素作为块级元素，并在该上下文中执行事件处理是有用的。

< P>我会考虑使用CSS来完成这个功能。因为这是一个菜单，你希望它是非常容易访问的。关闭javascript的用户（也可以考虑移动浏览器）或任何使用屏幕阅读器的人将无法使用您的菜单

尝试查看：

---

这是一个用于多下拉菜单的CSS解决方案，应该效果很好。

对于那些使用class而不是id的用户，这是它为我提供的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='menu_box'>
<ul class='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>
</ul>
</div>
<script>
$('#menu_box ul li ul').hide(); 
$('#menu_box ul li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});
</script>

$（“#菜单框ul li ul”）.hide（）；
$（'#菜单框ul li'）。悬停（函数（）{
$（this.find（'ul'）.show（）；
},
函数（）{
$（this.find（'ul'）.hide（）；
});

Hmmm。。不为我工作。当我用鼠标移出整个列表时，它消失了，不仅仅是子菜单哦，好吧，我用这个：$（'li#pages ul li ul'）.hide（）$（'li#pages'）.hover（函数（）{$（'li#pages ul-li'）.show（）}，函数（）{$（'li#pages ul'）.hide（）}）；

<ul id='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>

$('#menu li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id='menu_box'>
<ul class='menu'>
<li><a href="">Always showing</a></li>
<li><a href="">Always showing Title of Submenu</a>
<ul>
<li><a href="">Hidden until hover over Title </a></li>
</ul>
</li>
</ul>
</div>
<script>
$('#menu_box ul li ul').hide(); 
$('#menu_box ul li').hover(function() {
        $(this).find('ul').show();
    },
    function() {
      $(this).find('ul').hide();
});
</script>