1

ナビゲーション メニューがあり、サブページのドロップダウン メニューが必要でした。私はそれを作成しましたが、サブページのあるページリンクにカーソルを合わせるとドロップダウンが表示されると、トップメニューのページリンクが右にスライドすることを除いて、すべて問題ありません。ここで私が見逃しているのは何ですか？事前に助けてくれてありがとう。

ここに jsfiddle があります: jsfiddle.net/AC8XK/

私が持っているものは、100% 欠けているものがあるので、そのようなものではありませんが、私が言及した問題を正確に示しています。

メニューを正常に動作させることができました。最初の問題の解決策は、mike が言ったように、ドロップダウンul の位置をrelativeからabsoluteに変更することでした。

ドロップダウンの配置に関しては、 topまたはmargin- topの代わりにpadding-topを使用して問題を解決しました。

助けようとしたすべての人に感謝します。

4

1 に答える 1

2

あなたがjsfiddleで提供したコードは..まあ...ちょっと混乱していました。その多くを取り除き、ドロップダウンの基本フォーマットを生成する必要がありました。重要な部分についてコメントしますが、多かれ少なかれコピー＆ペーストする必要があります。コードは、メニューのレイアウト テキストのみであり、視覚的または位置的なスタイリングはありません。

重要な概念: 1 - LI をwidth:autoに、li>ul を に設定しますposition: absolute;width:100%。これにより、配置が可能になり、個々ul ul liの が別々の行にあることが保証されます。2- あなたはdisplay:noneとdisplay:block正解でした。または、同じ目的で画面外の配置を使用することもできます。ul ul {position:absolute;}3-親に対するサブメニューの配置を許可することを忘れないでくださいli!

HTML:

<div class="greenbar">
<nav>
    <ul id="menu-navigation-menu" class="navigation">
        <li id="menu-item-107" class="menu-item"><a href="#">About</a>
            <ul class="sub-menu">
                <li id="menu-item-116" class="menu-item"><a href="#">Terms of Use</a></li>
                <li id="menu-item-119" class="menu-item"><a href="#">Just another link</a></li>
            </ul>
        </li>
        <li id="menu-item-106" class="menu-item"><a href="#">Services</a>
            <ul class="sub-menu">
                <li id="menu-item-120" class="menu-item"><a href="#">Another link again</a></li>
            </ul>
        </li>
        <li id="menu-item-105" class="menu-item"><a href="#">Clients</a></li>
        <li id="menu-item-104" class="menu-item"><a href="#">Resources</a></li>
    </ul>
</nav>
</div>

CSS:

nav ul {
list-style-type: none;
position: relative;
display: inline-table;
}
nav ul li {float: left;}
nav ul li a { display: block; text-decoration: none;}
nav ul ul {
display: none;
position: absolute;
width: auto;
}
nav ul li:hover > ul { display: block;}
nav ul ul li { width: 100%;}
于 2013-07-19T22:06:27.303 に答える