我的标题设置如下:
<div id="header">
<div class="container_16">
<div class="grid_4"><img src="content/images/logo-beta.png" /></div>
<div class="grid_5 push_1">
<ul id="navigation">
<li><a class="header-link" href="#">About</a><span class="sub-navigation"><a class="sub-link" href="#">Info</a><a class="sub-link" href="#">Terms</a></span></li>
<li><a class="header-link" href="#">Account</a><span class="sub-navigation"><a class="sub-link" href="#">Sign In</a><a class="sub-link" href="#">Sign Up</a></span></li>
</ul>
</div>
<div class="grid_7 push_3">Search</div>
</div>
</div>
我使用960 GS作为总体布局。我想做的是让我的导航看起来像是分层的。
About Account
Info, Terms Sign In, Sign Up
其中关于和帐户是粗体(这很容易),但我希望子项的范围低于标题导航项,并且LI的内嵌如上所示。一旦我附加display:block to the span,即使LI有显示:内嵌在它们上面,它们也会相互叠加。
这是我到目前为止我的CSS。
#navigation
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation li
{
color: #f7f3e7;
display: inline;
}
#navigation li span.sub-navigation
{
display:block;
}
#navigation li a
{
color: #f7f3e7;
text-decoration: none;
}
.header-link
{
font-weight: bold;
}
答案 0 :(得分:2)
不要让你的子列表跨越..也可以列出它们!
<ul class="main-list">
<li class="main-list-title">Title!
<ul class="sub-list">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
为了扩展我的答案,你应该能够做一些CSS魔法,你可以使你的等级1 li
和等级2 li
按你想要的方式排列,也许浮动你的l1 { {1}}离开并使你的l2 li
s li
答案 1 :(得分:1)
虽然Jason所说的更具语义性,但你的CSS几乎就在那里,你在正确的地方错过了float:left
这是您的代码版本(适用于Firefox)http://jsbin.com/adede3
要修改该代码,请转到http://jsbin.com/adede3/edit