Question

我的导航带有水平子导航，需要在子页面上粘贴。

我将所有这些都与CSS一起使用，但问题是，当我将鼠标悬停在另一个父ul上时，我需要隐藏子页面上的粘性li并返回粘性时我不是在徘徊。我认为jQuery是唯一的解决方案。

这是我到目前为止所做的：

<style type="text/css">
.current-menu-parent ul{
display:block !important;
position:absolute!important;
}
#primary-nav ul li:hover ul {
display:inline;
position:absolute;
}
#primary-nav ul li > ul{
    display:none;
}
</style

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript">    </script>
<script type="text/javascript">
$(document).ready(function(){
 $("#primary-nav ul li").mouseover(function(){
  $('.current-menu-parent ul').hide();
});
 $("#primary-nav ul li").mouseout(function(){
  $(".current-menu-parent ul").show();
});
});
</script>
<body>
<div id="primary-nav">
  <ul>
    <li>item</li>
    <li class="current-menu-parent>This is the current menu parent item
        <ul>
            <li>Current page</li>
            <li>page</li>
            <li>page</li>
        </ul>
     </li>
   <ul>
</div>

很抱歉，如果有拼写错误，请快速重写。

这是链接，因此您可以直接看到问题。只需点击子页面即可查看问题。

Answer 1

删除important

上的.current-menu-parent ul

.current-menu-parent ul{
    display:block;
    position:absolute;
}

导致坚持。

由于.show()上的.mouseout()而导致下一个问题，反之亦然。

$("#primary-nav ul li").mouseover(function(){
    $('.current-menu-parent ul').show();
});
$("#primary-nav ul li").mouseout(function(){
    $(".current-menu-parent ul").hide();
});

参考 LIVE DEMO

css和Jquery show hide hide子菜单

1 个答案: