Проблема с меню на css

[wendstor]

В общем суть заключается в том, что я пока ещё новичёк в этом деле и уже второй день как не могу правильно сделать позиционирование в sub_menu, все элементы li в нём отображаются в строку, но не как не получается отоброзить li списком.

<ul id="menu">
 <li> <a href="#">Пункт 1</a></li>
 <li> <a href="#">Пункт 2</a>
      <ul id="sub_menu"> 
        <li> <a href="#">Под Пункт1</a></li>
        <li> <a href="#">Под Пункт2</a></li>
        <li> <a href="#">Под Пункт3</a></li>
        <li> <a href="#">Под Пункт4</a></li>
        <li> <a href="#">Под Пункт5</a></li>
        <li> <a href="#">Под Пункт6</a></li>
        <li> <a href="#">Под Пункт7</a></li>
        <li> <a href="#">Под Пункт8</a></li>
        <li> <a href="#">Под Пункт9</a></li>
        <li> <a href="#">Под Пункт10</a></li>
        <li> <a href="#">Под Пункт11</a></li>
        <li> <a href="#">Под Пункт12</a></li>
    </ul>	
 </li>
 <li> <a href="#">Пункт 3</a></li>
</ul>

#menu {
	margin:0;
	padding:0;
	height:28px;
	background-color:#09F;
	border:1px solid #333;
	font:12px/28px Verdana, Geneva, sans-serif;
	list-style:none;
}
#menu li {
   	display:block;
	float:left;
	width:90px;
	text-align:center;
	border-right:1px solid #000;
}
#menu li a{
   	display:block;
	color:#000;
	text-decoration:none;
}
#menu li:hover > a{
	background-color:#06F;
	color:#FFF;
}
#menu li:hover #sub_menu{
	display:block;
}

#sub_menu{
	margin:0;
	padding:0;
	display:none;
	background-color:#06f;
	border:1px solid #000;
	position:absolute;
	height:150px;
}
#sub_menu li{
	border-right:0;
	display:block;
	text-align:center;
	position:relative;
	margin:5px;
}
#sub_menu li:hover > a{
	background-color:#09F;
	color:#FFF;
}

По задумке должно быть как то так: Пример

ПЛЗ подскажите где подправить и почему он выстраивает li элементы sub_menu в строку ?

[olechic]

ПЛЗ подскажите где подправить и почему он выстраивает li элементы sub_menu в строку ?

float:left; выстраивает в строку

Edited September 18, 2012 by olechic

[wwt]

column-width и column-count

http://jsfiddle.net/Kx2q8/

но это не будет работать в IE ниже 10 версии

PS вот еще статья по поводу вашего вопроса там описаны несколько способов кроссбраузерных )0 http://www.alistapart.com/articles/multicolumnlists/

Правда на английском )) но есть примеры

Edited September 18, 2012 by wwt

[Int]

#menu > li {
        display:block;
        float:left;

Попробуй так. Думаю, float наследуется. Выясни это с помощью файрбага.

[wendstor]

Int да float наследовался, но вот получается только строкой

Под пункт1 - Под пункт2 ....

В инете смотрел, есть только деление списка на несколько колонок, а вот как мне хотелось, в инете пишут что не получится реализовать.