2012-07-09 58 views
0

我有一个导航水平子导航需要粘在子页面上。css和jquery显示隐藏粘性子菜单

我把所有的与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> 

对不起有错字只是快速地重新写这个。

这是链接,您可以直接看到问题。只要点击一个子页面就可以看到问题。

回答

0

.current-menu-parent ul

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

删除important这是造成粘。

下一个问题是由于.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

+0

清楚,解决了第一个问题...八九不离十了。唯一的问题是,现在当我将鼠标悬停在粘滞的ul上时,它会跳出来,就像jquery继承了这些项目。我试图更准确地针对父李,并使用第一个孩子选择器,但似乎都没有工作。 – codeprokanner 2012-07-09 20:09:03