0

主な見出しの左側に浮かぶメニューリストがあります。

メインメニュー

サブメニューのあるメニュー項目がホバー状態の場合、サブメニューはドロップダウンしますが、メインの見出しよりも幅が広い場合はメニューを右に押します（「shop」と「about」の間の間隔-予想どおり）：

サブメニュー

サブメニューの高さを維持しようとしていますが（ページ上でその下のコンテンツをプッシュダウンするため）、幅に基づいてアイテムを右にプッシュしていません。

を使用position: absoluteすると、サブメニューを開いたときにサブメニューの高さが無視されます。

私が欠けているものがあることを願っています。

ご協力いただきありがとうございます！

4

3 に答える 3

0

サブメニューを動的に配置し、その位置を絶対に設定します。メニューボタンを左の位置と高さに設定してから、サブメニューを左に設定し、その上部を親の高さに設定する必要があります。メニューがページ上の別のコンテナに埋め込まれている場合に備えて、offset（）を使用して左の位置を取得することを忘れないでください。

于 2012-08-21T20:08:49.653 に答える
0

サブメニューの幅を親メニューの幅に設定してから、次のように設定してみてください。

text-overflow: inherit;
overflow: visible;

サブメニュー

于 2012-08-21T20:40:34.970 に答える
0

コンテンツを下にプッシュすることは、javascriptを介して（のみ？）実行できると思います。更新されたフィドルとそのソースは次のとおりです。

JS：

$(document).ready(function(){
    $("li.drop").hover(function(){
        $(this).addClass("hover");
        $('#nav').css('height', $(this).children('ul:first').height()+30+'px');
    }, function(){
        $(this).removeClass("hover");
        $('#nav').css('height', '');
    });
});

CSS：

#nav > li {
    position:relative;
    display:inline;
    margin:0px 15px;
    padding:0;
}

#nav > li ul {
    display: none;
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
}
#nav > li.hover ul {
    display: block;
}

#content {
    height: 50px;
    width: 100%;
    background: grey;
}

#nav ul {
    list-style-type: none;
    padding:0;
}
于 2012-08-21T20:45:22.710 に答える