Вертикальный список в горизонтальном списке

Я пытаюсь создать базовую навигацию, и я хотел бы иметь горизонтальный список с вертикальным списком элементов:

Header 1     Header 2     Header 3
 -Sub 1       -Sub 1       -Sub 1
 -Sub 2       -Sub 2       -Sub 2
 -Sub 3       -Sub 3       -Sub 3

Я снимаю для этой разметки или чего-то подобного:

<ul>
    <li><strong>Header 1</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 2</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 3</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>

</ul>

Я пытаюсь избежать плавающих div для каждого раздела заголовка.

Я пытался использовать два класса CSS для UL с внешним установленным наdisplay:inline и внутреннийdisplay:block, но я не могу заставить его работать.

Как мне это сделать, или я должен плавать div?

Ответы на вопрос(2)

кто нуждается в этом

<!DOCTYPE html>
<html>
<body>

<style>
   .ul  li {
  float: left;
  width:30%;
}

.ul>li ul{
   display:block;
   margin-left:-30px;
}

.ul>li ul>li{
   display:block;
   float:none;
}
.ul>li a{
    color:white;
}

footer {
    padding: 20px;
    padding-bottom: 100px;
    background: #333;
    color:white;
}

</style>

<footer>
<div>
<ul class="ul">
   <li>
       naber

         <ul>
            <li><a href="#">link bir</a></li>
            <li><a href="#">link bir</a></li>
            <li><a href="#">link bir</a></li>
         </ul>

   </li>
   <li>
       dostum

         <ul>
            <li>birrr</li>
            <li>iki</li>
            <li>uc</li>
         </ul>

   </li>
   <li>
       nasılsın

         <ul>
            <li>bir</li>
            <li>iki</li>
            <li>uc</li>
         </ul>

   </li>
</ul>
</div>

</footer>

</body>
</html>
Решение Вопроса

lis (чтобы избежать «плавающих div»), или используйтеdisplay: inline-block для первого уровняlis. Принимая во внимание, что плавающий будет работать для IE6 +, тогда какinline-block ограничено только теми элементами, которые обычно отображаютinline.

Базовая демка для первого (плавающий первый уровеньlis) предложение:

 ul {
   width: 90%;
   margin: 0 auto;
 }
 ul > li {
   float: left;
   width: 32%;
 }
 ul > li > ul {
   display: block;
   width: 100%;
 }
 ul > li > ul > li {
   display: block;
   float: none;
 }
<ul>
  <li><strong>Header 1</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 2</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 3</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>

</ul>

Базовая демка для второго (display: inline-block для первого уровняlis) предложение:

ul {
  width: 90%;
  margin: 0 auto;
}
ul li {
  display: inline-block;
  width: 32%;
}
ul li ul {
  width: 100%;
}
ul li ul li {
  display: block;
}
<ul>
  <li><strong>Header 1</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 2</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 3</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>

</ul>

 Mark23 сент. 2010 г., 09:18
Благодарю. Я думал, что написал комментарий как 6 часов назад, но, видимо, нет. Это сработало отлично. Я не правильно использовал селектор>. Не знаю, о чем я думал. Еще раз спасибо.
 Josh Stodola22 сент. 2010 г., 23:47
+1 Да, это то, что я бы сказал. Хотя, я думаю, было бы полезно, если бы вы включили соответствующий CSS как часть своего ответа. Что если JSBin сбросится?
 David Thomas22 сент. 2010 г., 23:52
@ Джош, я отправил и ушел, в основном; и почему-то я думал, что яимел включил css. Ах, маразм моего среднего возраста ... =)

Ваш ответ на вопрос