0

私は自分のウェブサイト用に作成したメニューを持っていますが、そこには第 2 レベルのメニューもありますが、問題は第 2 レベルのメニューにいくつかの問題があることです。

  1. サイズが大きくなっています
  2. メニュー項目が右に浮いている
  3. 別の第 1 レベルのメニュー項目の領域に入ります

これらの問題を解決したいのですが、自分では解決できません。

HTML:

<header>
    <div class="welcome_area">
        <p>Welcome, <b><a href="profile.php">Arkam Gadet</a></b>

        </p>
    </div>
    <div class="menu">
        <nav>
            <ul style="z-index: 20;">
                <li>    <a href="profile.php">My Profile</a>

                    <ul style="display: none; background-color: #eee; box-shadow: 0px 0px 2px 3px #bbb; z-index: 1;">
                        <li><a href="#">My Questions</a>
                        </li>
                        <li><a href="#">Settings</a>
                        </li>
                    </ul>
                </li>
                <li><a href="inbox.php">Inbox</a>
                </li>
                <li><a href="#">Notifications</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS:

header {
    background-color: #eee;
    height: 45px;
    box-shadow: 0px 2px 3px 1px #bbb;
}
a {
    color: black;
    text-decoration: none;
}
h2 {
    color: #f79a1d;
}
.welcome_area {
    float: left;
    margin-left: 5%;
}
.menu {
    float: right;
    margin-right: 5%;
}
.menu nav > ul {
    position: relative;
}
.menu nav ul li {
    display: inline;
    padding: 5px;
}
.menu nav ul li a {
    padding: 2px;
}
.menu nav ul li a:hover {
    background: #eee;
    border: 0;
    border-radius: 3px;
    box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
    position: absolute;
    left: 0;
}
.menu nav > ul li > ul li {
    display: block;
}

デモンストレーション。

フィドルでわかるように、アイテムは第 2 レベルのメニューで右に向かって浮かんでいます。

  1. 第 2 レベルのメニュー項目を左にフロート
  2. 第 2 レベルのメニューの幅を短くする
  3. それらをナビゲーションバーから送り返します。
  4. 別の第 1 レベルのメニュー項目の場所に入らないようにします。
4

2 に答える 2

1

あなたの問題に対する私の回答と、対応するFiddleを次に示します。

1) 第 2 レベルのメニュー項目を左にフロート

削除されpaddingました。

.menu nav ul { padding:0px; }

また、ドロップダウンの位置を変更しました (必要に応じて微調整してください):

.menu nav > ul ul {
  position: absolute;
  left: 5px;
  top:22px;
}


2) 第 2 レベルのメニューの幅を短くする

これは＃1によって満足されましたか？


3) ナビゲーションバーからそれらを送り返します。

と を追加positionしましz-indexた。

.menu nav ul li a {
    position:relative;
    padding: 2px;
    z-index:5;
}

これにより、ドロップダウンがメイン<a>の後ろに配置されます。

ただし、ドロップダウンを実際のメニュー バー (灰色のバー) の後ろから表示したい場合は、再構築する必要があります。


4) 別の第 1 レベルのメニュー項目の場所に入らないようにします。

これが何を意味するのかわかりません。明確にすることは可能ですか？

于 2013-07-19T21:50:20.480 に答える
0

これをcssに追加します

    .menu nav ul li  ul  {
    padding:0px;
    margin-left:45px;
}

デモ

于 2013-07-19T21:38:39.017 に答える