2

ここにこのコードがあり、ホバーイベントでネストされた.submenuリストを表示しようとしています。ul#menu liがul.submenuの中にあるliのに、何らかの理由で実際のul#menu li aからネストされたものにマウスをドラッグすると、そこからul.submenu移動しているように消えてしまいます。なぜそれが起こるのかわかりません。

私はDOMを少し変更して使用しようとしましたsetTimeoutが、うまくいきませんでした。

これを実現する方法のアイデアはありますか? さらに重要なのは、なぜ私の問題が発生するのですか? つまり、ul.submenuはの中にあるliので、同じホバー エリアと見なすべきではないでしょうか。

4

3 に答える 3

2

よくある問題。親メニュー項目と の間のスペースが.submenu原因です。

これを簡単に修正するには、メニュー項目とサブメニューの間のブリッジとして機能するのに十分な幅の でラップ.submenuします。div

ここを参照してください - http://jsfiddle.net/BuJav/15/

CSSの変更 -

.submenu-wrapper {
    position: absolute;
    min-width: 160px;
    min-height: 36px;
    top: -4px;
    left: 160px;
}
.submenu {
    position: relative;
    min-width: 160px;
    min-height: 36px;
    top: 0;
    left: 10px;
    background: url('../images/gradient_menuarea.png') repeat-x;
}

JS の変更 - 

$(function(){
    $('#menu > li, .submenu > li').hover(
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.removeClass('hide');
            }
        },
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.addClass('hide');
            }
    });
});

サブメニュー ul が正しくターゲットされるように。

このcssを使用してJSを削除できることに注意してください

.submenu {display:none;}
#menu-area ul li:hover .submenu {display:block}

.hideサブメニュー ul のクラスも必要ありません

http://jsfiddle.net/BuJav/16/

于 2013-02-25T15:38:29.240 に答える
0

これを試してください：http://jsfiddle.net/UFevL/6/

HTML

<div id="menu">
    <ul>
        <li class="active">
            <a href="?l=EL&amp;m=932K59EciV">Menu #1</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=M-z-3crmAP">Menu #2</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=jpHiTwH1bT">Menu #3</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=Jwr0SIWoWX">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=QY8SgMl5JH">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=8GaCmPByu3">Menu #5</a>
        </li>
        <li>
            <ul>
                <li>
                    <a href="?l=EL&amp;m=ueHp2vYKUa">Submenu #1</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=HQvyKxum8q">Submenu #2</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=81cDaTOCsL">Submenu #3</a>
                </li>
            </ul>
            <a href="?l=EL&amp;m=BQMppfQ0Dl">Menu #6</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=D3wTd4F5Mn">Menu #7</a>
        </li>
    </ul>
</div>

CSS

#menu ul {
    width: 160px;
    padding: 4px;
    margin: 0;
    border: 2px solid #94AA13;
    background-color: #fff;
    border-radius: 4px;
}

#menu li {
    position: relative;
    padding: 0;
    margin: 0;
}

#menu li + li {
    margin-top: 4px;
}

#menu a {
    display: block;
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    color: #f2f2f2;
    background-color: #283720;
    border-radius: 4px;
}

#menu li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin: -4px 0 0 10px;
}

#menu li:hover > ul {
    display: block;
}

#menu li:hover > ul:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
}

JS... なし！

トリックは :before 要素にあります: http://caniuse.com/#search=before

使用できない場合は、ダミーの div を追加してみてください。

于 2013-02-25T14:36:26.827 に答える
0

現在のプロジェクトで受け入れられるかどうかはわかりませんが、簡単な修正を行うことができます。

menu-area ul li a{
   width: 100%;
   color: #F2F2F2;
   display: block;
   padding-right:10%;
}

値は、必要に応じて任意の % に変更できます。がサブメニュー領域と一致することを確認するのに十分なだけにしてください. 正確な値を確認する気にはなりませんでした。それがうまくいくかどうか教えてください！

于 2013-02-25T14:55:40.390 に答える