二级菜单表现异常

Question

我为我的网站创建了一个菜单，其中我有二级菜单，但问题是二级菜单有一些问题：

1. 它的尺寸更大
2. 它的菜单项是浮动的
3. 它将进入另一个第一级菜单项的区域

我想解决这些问题，但我无法独自完成。

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;
}

Demonstration.

正如你在小提琴中看到的那样，物品在第二级菜单中向右浮动，我希望它们

1. Float离开了第二级菜单项
2. 缩短第二级菜单的宽度
3. 将它们发回导航栏。
4. 防止它进入另一个第一级菜单项的位置。

Answer 1

以下是我对您的问题的回复以及相应的Fiddle。

1）Float离开第二级菜单项

已移除padding。

.menu nav ul { padding:0px; }

同样重新定位的下拉菜单（根据需要进行调整）：

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

2）缩短第二级菜单的宽度

这是否被＃1满意？

3）将它们发回导航栏。

添加了position和z-index。

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

这会将下拉列在主<a> s后面。

但是，如果您希望下拉菜单栏位于实际菜单栏（灰色栏）后面，则需要对结构进行重组。

4）防止它进入另一个第一级菜单项的位置。

我不确定这意味着什么。可以澄清一下吗？

Answer 2

将此添加到您的css

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

Demo