logo标签列表

CSS中的水平两级导航菜单

css
3
我正在为网站构建一个双层导航菜单。两个级别的菜单将始终可见。
我的问题是：
  • 希望第一和第二级菜单水平排列，每行占据一行
  • 将子级菜单与当前选定的一级菜单项左对齐
  • 不要使子级菜单将其余的一级菜单项向右推
孩子般的 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>

在这个例子中，我甚至无法使第二级菜单水平。但我已经看到，第二级菜单中的长标题将最后一个“关于我们”一级菜单项向右推出，看起来很丑陋。
非常感谢您的任何帮助！
1个回答
2

不将一级导航推出的关键是在二级导航上加上position: absolute; left: 0;。您需要在li.sub-li上添加position: relative;。

嗨，Joel，感谢您的评论。您能详细说明我需要在哪里放置绝对定位和相对定位吗？ - PeerBr
1
你应该将所有的ul.nav合并成一个大的ul。如果你这样做并使用这些样式，你应该得到你想要的效果。.nav, .nav ul {list-style-type:none; margin:0; padding:0;} .nav li { float: left; margin: 0 5px; } .nav .sub-li {position:relative;} .nav ul {position: absolute; left: 0; width: 600px;} .nav ul li {float:left;} - joeljoeljoel
1
你做到了！非常感谢。对于未来阅读此内容的所有人，必须将“ .nav ul”添加margin-left：-1px;，以便子菜单可以很好地显示在该项下方。 - PeerBr
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接