CSS中的水平、两级导航菜单

我正在为一个网站构建一个两级导航菜单。两个级别都将始终可见

我的问题是：我想

• 一级和二级菜单水平，各占一行
• 将子级菜单与当前激活的第一级菜单项左对齐
• 不允许子级菜单将剩余的第一级菜单项向右推

儿童艺术插图：

AAA BBBBBB CC DDD [1st level, B selected]
    aa bbb ccccc  [2nd level, options of B visible]

CSS:

HTML:

在本例中，我甚至无法使第二级菜单水平。但我已经看到，在第二级菜单中的长标题将最后一个“关于我们”的第一级菜单项推到了右侧，这看起来很难看

---

非常感谢您的帮助

不将一级导航推到上方的关键是放置位置：绝对；左：0；在第二层导航。您必须添加位置：相对；致li.sub li

你好，Joel，谢谢你的评论。你能详细说明一下我必须把绝对位置和相对位置放在哪里吗？你应该把所有的ul.nav组合成一个大的ul。如果您这样做并使用这些样式，您应该得到您的after.nav.nav ul{list样式类型：none；margin:0；padding:0；}.nav li{float:left；margin:05px；}.nav.sub li{position:relative；}.nav ul{position absolute；left:0；width:600px；}.nav ul li{float:left；}您做到了！非常感谢你。对于将来阅读本文的每个人，必须添加左边距：-1px；至“.nav ul”，因此子菜单正好位于项目下方。

.nav, .nav ul {list-style-type:none; margin:0; padding:0; float:left;}
.navl ul li ul li {}
.nav {margin-bottom:-1px;margin-right:-1px;}

.nav a {float:left; line-height:16px; padding:4px 0; border:1px solid #fff; margin-bottom:-1px;}

.nav ul {position:relative; clear:left;} 
 .nav ul li {float:left; clear:left;}
.nav a {position:relative;}

.sub-li a {margin-right:0;}

<ul class="nav">
    <li><a href="#url">Home</a></li>
</ul>
<ul class="nav">
    <li class="sub-li"><a class="sub-a" href="#url">Library</a>
        <ul>
            <li><a href="#url">Opening hours</a></li>
            <li><a href="#url">Librarians</a></li>
            <li><a href="#url">Geeks</a></li>
        </ul>
    </li>
</ul>
<ul class="nav">
    <li><a href="#url">About us</a></li>
</ul>