0

Web サイトをレスポンシブ レイアウトに変更したところ、ドロップダウン メニューが機能しなくなりました。「ドロップダウン」にカーソルを合わせると、position: relative を使用しない限り表示されません。position: absolute を使用する前は機能していましたが、現在は相対位置でのみ機能しているようです。相対を使用すると、ナビゲーションバーが台無しになる幅が使用されます。

相対を使用: http://d.pr/i/tp5R
絶対を使用: http://d.pr/i/j7r1

サブメニューの CSS 

div.left_first_header ul.sub-menu {
    width: 125px;
    top: 14px;
    z-index: 2;
    height: 100%;
    position: absolute;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    background: url(images/drop_down_bg.jpg);
    padding-left: 15px;
    padding-right: 15px;
    background-repeat: repeat;
}

ドロップダウン機能のjQuery

jQuery(document).ready(function ($) {
    jQuery("ul.dropdown li").hover(function() {
        $('ul:first',this).css('visibility', 'visible');
    }, function() {
        jQuery(this).removeClass("hover");
        jQuery('ul:first',this).css('visibility', 'hidden');
    });
});

私のウェブサイト
http://wpvault.com/kahlam/

今が午前 4 時であることを考えると、私は本当にばかげた単純な間違いを犯した可能性があります。

何か見落としがありましたら、お詫び申し上げます。

4

1 に答える 1

2

これには jQuery を使用する必要はありません。CSSを使ってみる:hover

<div class="left_first_header">
    <ul class="dropdown">
        Dropdown
        <ul class="sub-menu">
            <li>item</li>              
        </ul>
    </ul>
</div>

CSS:

.left_first_header .sub-menu {
    width: 125px;
    top: 14px;
    z-index: 2;
    height: 100%;
    position: absolute;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    background: url(images/drop_down_bg.jpg);
    padding-left: 15px;
    padding-right: 15px;
    background-repeat: repeat;
    display: none;
}


.left_first_header .dropdown:hover .sub-menu {
    display: block;
}​

CSS デモ: http://jsfiddle.net/TZbfJ/

編集:それでもjqueryを使いたい場合は、これを試してください:

.left_first_header .sub-menu {
    width: 125px;
    top: 14px;
    z-index: 2;
    height: 100%;
    position: absolute;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    padding-left: 15px;
    padding-right: 15px;
    background-repeat: repeat;
    display: none;
    background-color: blue;     
    margin-top: 4px;    
}

.dropdown {
    background-color: red;
    position: relative;
    margin: 20px;
}

JS:

$(function(){
    $(".dropdown").mouseenter(function(){
        $(this).find(".sub-menu").show();        
    }).mouseleave(function(){
       $(this).find(".sub-menu").hide();
    });
})

jQuery デモ: http://jsfiddle.net/63hkm/

于 2012-09-01T03:36:15.847 に答える