0

画像、実際にはロゴの上に表示されるスライドメニューがあります。ただし、そうすると、メニューのテキストが画像に触れないようにしたかったかのようにシフトされます。

見る ：

画像の問題http://fruityhotchocolate.com/m.png

（注：ウェブサイトはフランス語です）

私はこのイベントを次のように扱います。

$("nav>#menu>ul>li").hover(function(e) {
    $("ul",this).css("display","block");
});

ありがとう。

4

3 に答える 3

1

JavaScript は必要ありません。CSS で実行できます。

次のコードを追加します。

#menu>ul>li>ul {
    display: none;
    list-style: none;
}
#menu>ul>li:hover>ul {
    display: block;
}

さらに、>子孫セレクターの代わりに子セレクター ( )を使用する必要があります。

#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited
于 2012-08-28T21:17:13.677 に答える
0

基本的に、 は幅が固定されていないため、liは と同じ幅に拡張されます。ul試す：

$(document).ready(function() {
    $('#menu ul').children('li').each(function () {
        $(this).css('width', $(this).css('width'));
    });
});
于 2012-08-28T21:18:41.567 に答える
0

CSSで試してみてください：

<div class="content">
    <img src="https://www.google.com.br/images/srpr/logo3w.png​​​​​​​​​​" />
    <ul class="menu">
        <li>Item 1</li>
    </ul>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ CSS：

.content {
    position: relative;
}

.content:hover .menu {
    display: block;
}

.menu {
    position: absolute;
    display: none;
}

デモ: http://jsfiddle.net/nfKc4/

于 2012-08-28T21:21:33.967 に答える