0

ナビゲーション バーがサイト ロゴの上にあるナビゲーション メニューを作成する際のヘルプを探しています。サブメニューをナビゲーション バーから水平方向に展開し、親ナビゲーション バーとロゴの間に配置します。

  • サブメニューは横型
  • 折りたたみ時、ロゴはナビゲーションバーの下にあります
  • サブメニューはナビゲーション バーの外に展開し、ロゴの位置を押し下げます。

メインナビゲーション:

<nav>
    <div class="container">
        <ul class="menu">
            <li> <a href="#">One</a>

                <ul class="sub-menu">
                    <li><a href="#">Sub Menu One</a>
                    </li>
                    <li><a href="#">Sub Menu Two</a>
                    </li>
                    <li><a href="#">Sub Menu Three</a>
                    </li>
                    <li><a href="#">Sub Menu Four</a>
                    </li>
                    <li><a href="#">Sub Menu Five</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Two</a>
            </li>
            <li> <a href="#">Three</a>
            </li>
            <li> <a href="#">Four</a>
            </li>
            <li> <a href="#">Five</a>
            </li>
        </ul>
        </div>
    </div>
</nav>
<div class="logo"></div>

ここで模擬例を作成しました: http://jsfiddle.net/GSfpj/11/で遊んでいる CSS を含みます。

ロゴの下にサブメニューを展開する代わりに、ロゴを下に押して、親ナビゲーションとロゴの両方の間にサブメニューを配置できるようにしたいと考えています。

可能であれば純粋なCSSでこれを行うことをお勧めします。どんな助けも大歓迎です:)

4

3 に答える 3

0

更新されたフィードリンクは次のとおりです。次の css を変更する必要があります。

ul.menu li {
    display:inline;
    padding:10px;
    position:relative;
    z-index:9999;
}
ul.menu li ul.sub-menu {
    position:absolute;
    margin:0;
    padding:0;
    background:#2f2f2f;
    width:300px;
}
于 2013-06-03T05:43:40.017 に答える
0

おそらく次のようなことができます：

ul:hover {padding-bottom:25px;}

... とはいえ、正直なところ、とにかく動作が良いとは思いません。ロゴの上にサブメニューを表示しないのはなぜですか?

于 2013-06-03T02:53:09.620 に答える