0

我有一个像这样设置的标题：

    <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

About 和 Account 是粗体的（这很容易），但我希望子项目的跨度低于标题导航项目，并且 LI 像上面一样显示为内联。一旦我将 display:block 附加到跨度上，即使 LI 有 display:inline ，它们也会彼此重叠。

这是我到目前为止的 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;
}
4

2 回答 2

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 魔术，让您的 level 1 lis 和 level 2 lis 按您想要的方式排列，也许将您的 l1 lis 向左浮动并使您的 l2 lisinline-block

于 2009-12-17T19:31:52.417 回答
1

尽管 Jason 所说的更具语义性，但您的 CSS 几乎就在那里，您只是float:left在正确的地方错过了

这是你的代码版本（在 Firefox 中工作）http://jsbin.com/adede3

要编辑该代码，请访问http://jsbin.com/adede3/edit

于 2009-12-17T20:28:47.683 回答