Question

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

我的问题：我想

将第1级和第2级菜单设为水平，每行占一行
将子级别菜单与当前活动的第1级菜单项左对齐
没有子级别菜单将剩余的第1级菜单项推到右侧

童心的ASCII艺术插图：

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

CSS：

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

HTML：

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

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

非常感谢任何帮助！

Answer 1

不推动第一级导航的关键是放置位置：绝对;左：0;在二级导航。你必须添加位置：相对;到li.sub-li

CSS中的水平两级导航菜单

1 个答案: