CSS, встроенный список с несколькими строками - PullRequest
Новая
       14

CSS, встроенный список с несколькими строками

0 голосов
/ 17 декабря 2009

У меня заголовок настроен так: 

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

Ответы [ 2 ]

2 голосов
/ 17 декабря 2009

Не делайте ваши списки подсписков ... составьте их списки тоже! 

<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 s и сделать свой l2 li s inline-block

1 голос
/ 17 декабря 2009

Хотя то, что сказал Джейсон, является более семантическим, вы почти с вашим CSS, вы просто пропустили float:left в нужном месте

вот версия вашего кода (работает в Firefox) http://jsbin.com/adede3

Для редактирования этого кода перейдите на http://jsbin.com/adede3/edit

...