CSS，有多条线路的

Question

我有一个头设置了这样的在线列表：我的总体布局

<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的如上内嵌出现。只要我将显示：块附加到跨度上，即使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; 
} 

Answer 1

虽然什么杰森说是更多的语义，你几乎有你的CSS，你只是在正确的地方

这里缺少一个float:left是你一个版本代码（在Firefox ）http://jsbin.com/adede3

要抛开编辑代码转到http://jsbin.com/adede3/edit

Answer 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你的级别s和2级li s的线路了，你怎么想的，也许浮动的L1 li的左，使您的L2 li小号inline-block