0

我有一个带有水平子导航的导航，需要在子页面上保持粘性。

我已经使用 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>

抱歉，如果有错字，很快就重新写了。

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

4

1 回答 1

0

删除important_.current-menu-parent ul

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

这导致坚持。

下一个问题是由于.show()on引起的.mouseout()，反之亦然。

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

参考现场演示

于 2012-07-09T19:30:55.967 回答