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

[wendstor]

В общем в этом деле пока новичёк, но вот бьюсь часа 3-и и решения всё так и не нашёл.

HTML:

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

CSS:

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

Суть в том что в #sub_menu списки li отображаются строкой, а по задумке очень нужно списком, с авто-шириной при высоте в 150px (указывал в #sub_menu)
В общем как то так должно быть
http://files.hostingdj.us/images.hos...y829 7392.png

[Blizzart]

#menu > li {
....}