html - 二级菜单行为异常

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

示范。

正如您在小提琴中看到的那样，项目在二级菜单中向右浮动，我希望它们

1. 向左浮动二级菜单项
2. 缩短二级菜单的宽度
3. 将它们发送回导航栏。
4. 防止它进入另一个一级菜单项的位置。

Answer 1

这是我对您的问题和相应的Fiddle的回复。

1) 向左浮动二级菜单项

已删除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;
}

这将下拉菜单置于 main <a>s 后面。

但是，如果您希望下拉菜单来自实际的菜单栏（灰色栏），则需要重新构建内容。

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

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

Answer 2

将此添加到您的CSS

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

演示