сделать пункты списка рядом друг с другом

Question

У меня есть меню с подменю. Я использовал вложенные uls для достижения этого. Теперь я столкнулся с такой ситуацией: я хочу, чтобы все элементы и подэлементы отображались горизонтально на соответствующем уровне. Проблема в том, что когда родительский список имеет список детей, его ширина увеличивается, поэтому следующий элемент на том же уровне выходит далеко вправо.

Чтобы иметь вещи более ясно, вот скрипка, что я везу о: http://jsfiddle.net/matias/n8gFT/

Как вы можете видеть, что я хотел бы иметь пункты B и C, расположенные где зеленые пунктирную пространства.

Возможно ли это?

Я хотел бы продолжать использовать вложенные ULS и display: inline-block для itemes вместо float: left

ОБРАЗЦА HTML:

<ul> 
    <li>ITEM A 
     <ul> 
      <li>sub item A1</li> 
      <li>sub item A2</li> 
     </ul> 
    </li> 
    <li>ITEM B</li> 
    <li>ITEM C</li> 
</ul> 

ОБРАЗЦА CSS:

ul{border: 1px solid red; padding: 10px;} 
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;} 
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;} 

EDIT 1: Я забыл сказать вам следующее: у A, B и C есть дети. Если я нажимаю на B, это дети показаны и А и С. кроются ... и так далее ....

Answer 1

Я достиг того, что я искал с помощью display: table-cell к Ли и уменьшая ширину ul.

См demo

Answer 2

Вы можете стилизовать списки, которые подталкивают над of margin-left: -20px; здесь является рабочей скрипкой

http://jsfiddle.net/n8gFT/1/

конечно сумма его толкнули можно редактировать, изменяя margin-left

Answer 3

Добавить класс в подсписков и стиль их так:

.sub { position: absolute; margin-left: -27px; } 

Answer 4

Мы начнем с небольшой CSS

#menu > li.sub ul { 
list-style: none; 
position: absolute; 
top: -1000em; 
left: 0px; 
} 


#menu li.sub ul li a { 
display: inline; 
} 

#menu > li.sub:hover ul { 
top: 3em; 
} 

#menu{ 
text-align:left; 
} 

li{ 
display:inline-block; 
} 

Готово с некоторыми HTML

<ul id="menu" > 

<li class="sub"> ITEM A 
<ul> 
<li>sub A1</li> 
<li>sub A2</li> 
</ul> 
</li> 
<li class="sub">ITEM B 
<ul> 
<li>sub B1</li> 
<li>sub B2</li> 
</ul> 
</li> 
<li class="sub">ITEM C 
    <ul> 
<li>sub C1</li> 
<li>sub C2</li> 
</ul> 
</li> 

</ul> 

и JSFIDDLE http://jsfiddle.net/ShADm/28/