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 に答える