0

このようなカテゴリメニューを作成しようとしています。

私はこれまでにこれを作成しました: http://jsfiddle.net/q5GcD/

大きなメニューは、bigmenu div からマウスを離した場合にのみ閉じる必要があります。

また、大きなメニューを小さなメニュー ボタンと重なるように正しく配置できません。

HTML :

<div id="mydiv">Menu</div>
<div id="bigmenu">This is big menu</div>

CSS :

#mydiv {
    position:absolute;
    top:10px;
    left:50px;
    height:50px;
    width:200px;
    background-color:#fff;
    border:1px solid black;
}
#bigmenu {
    position:absolute;
    top:10px;
    left:50x;
    height:500px;
    width:200px;
    background-color:orangered;
}

脚本 ：

$(document).ready(function(){


    $('#bigmenu').css("display","none");
    $('#mydiv').hover(function(){
        $('#bigmenu').css("display","inline");

        },function(){
           $('#bigmenu').css("display","none");
            }

        );

});
4

3 に答える 3

2

javascriptは必要ありません。:hover 動的疑似クラスを使用するだけで、CSSで実行できます。

#bigmenu#mydivから出るまで#bigmenu（から出るだけでなく）アクティブに保つために、兄弟ではなくの子である必要があります#mydiv。

絶対位置も必要ありません。

デモ： http： //jsfiddle.net/q5GcD/1/

HTML

<div id="mydiv">
   Menu
   <div id="bigmenu">
      This is big menu
   </div>
</div>

CSS

#mydiv {
    min-height:50px;
    width:200px;
    background-color:#fff;
    border:1px solid black;
}

#mydiv:hover > #bigmenu{
    display: block;
}

#bigmenu {  
    display: none;
    height:500px;
    width:200px;
    background-color:orangered;
}

この行：

#mydiv：hover> #bigmenu {

は、要素の括弧の間にルールを適用するようにブラウザに指示しています。つまり、要素にホバー（マウスを合わせる）すると、要素のid="bigmenu"子（with >、Child Selector ）になります。id="myDiv"

元のHTMLコードのように兄弟の場合+は、隣接する兄弟セレクターを使用する必要があります。

于 2013-01-18T16:14:44.903 に答える
1

これはあなたが探しているものですか？
http://jsfiddle.net/q5GcD/2/

アライメントを処理するのでは50xなく、cssにタイプミスがあります。50px

JSについては、ホバーの代わりにmouseenterとmouseleaveを使用してください

于 2013-01-18T16:15:03.133 に答える
0

それは実際にはリストメニューです:)

<ul>
    <li><a href=''>Cat drop</a>
    <ul>
        <li>
            <a href=''>second drop</a>
        </li>
    </ul>
    </li>
</ul>

クイックCSS:

ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
  }
ul >li {
    /* top style */
    background:#FF0000;
}
ul>li>ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
    position:absolute;
    display:none;
    background:#00FF00;
}
ul>li:hover>ul{
   display:block;
}

最後のセレクターを使用すると、jQuery や JavaScript は必要ありません。それが彼らが使用していると私が思うものですが、私は間違っている可能性があります. まだ両方使えると思う？それについては100％確信が持てません。

于 2013-01-18T16:15:54.730 に答える