Нуждаюсь в помощь в меню

[koroles]

Вот мне нужно доделать меню,но у меня не получатся!!

сейчас вы видите 2 менюшки а то что красным мне нужно доделать!(что бы получилось 4 как на скриншоте)

то есть вот как оно должно быть!!

наводишь курсор на О иваново и у тя открывается подменю ....

 css
.menu{
    font-family:arial, sans-serif;
    width:500;
	top: 87;
	left:-8;
    position:relative;
    font-size:11px;
    z-index:10
}
.menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:200px;
    height:20px;
    text-align:center;
    color:#000000; /*Цвет букв начальных*/
    border:1 solid #000000; /*Ширина между строк*/
    background:#ffffff; /*Цвет главной рамки*/
    line-height:20px;
    font-size:11px;
    overflow:hidden
}
.menu ul{
    padding:0;
    margin:0;
    list-style:none
}
.menu ul li{
    float:left;
    position:relative}
.menu ul li ul{
    display:none
}
.menu ul li:hover a{
    color:#000000;
}
.menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li:hover ul li a{
    display:block;
    background:#fff;
    color:#000
}
.menu ul li:hover ul li a:hover{
    background:#ffff00;
    color:#000
}

 body
<div class="menu">
<ul> 
<li><a class="hide" href="">О Иваново</a>
<ul>
<li><a href="" title="">История города</a></li>
<li><a href="" title="">Известные уроженцы города</a></li>
<li><a href="" title="">Исторические достопримечательности</a></li>
</ul>    
</li>
 <li><a class="hide" href="">Учереждения города</a> 
<ul>
<li><a href="" title="">Образовательные учереждения</a></li>
<li><a href="" title="">Здравохранительные учереждения</a></li>
<li><a href="" title="">Кинотеатры</a></li>
<li><a href="" title="">Музеи</a></li>
</ul>
</li>
</ul>
</div>

сразу говорю меню верстал не я!!(мне мозгов не хватит)!!Очень нужна ваша помощь

Edited November 9, 2011 by koroles

[ShumNo]

Так добавить дальше li и больше ничего

http://jsfiddle.net/p9dBr/

<li><a class="hide" href="">Галлерея</a> 
<ul>
<li><a href="" title="">Образовательные учереждения</a></li>
<li><a href="" title="">Здравохранительные учереждения</a></li>
<li><a href="" title="">Кинотеатры</a></li>
<li><a href="" title="">Музеи</a></li>
</ul>
</li>

[koroles]

ShumNo я так делал и умя меню новые менюшки встают под те каторые уже были а надо что бы они шли все горизонтально

[ShumNo]

  On 11/9/2011 at 12:28 PM, koroles said:

ShumNo я так делал и умя меню новые менюшки встают под те каторые уже были а надо что бы они шли все горизонтально

Они и идут горизонтально просто если места недостаточно, то переносятся на следующую строку

[koroles]

ShumNo

В смысле места недостаточно??как сделать тогда что бы было достаточно??

[ShumNo]

  On 11/9/2011 at 12:57 PM, koroles said:

ShumNo

В смысле места недостаточно??как сделать тогда что бы было достаточно??

Посмотрите свой же пример который я отредактировал http://jsfiddle.net/p9dBr/, при изменении размера окна/блока изменяется кол-во li которые влезают в строчку. Если ширина родителя грубо говоря 500px то 4 блока по 200 туда ну ни как не запихнуть в одну строчку и li автоматически разместится в 2 строчки

Edited November 9, 2011 by ShumNo

[koroles]

ShumNo

Спасибо большое ошибка была глупой!все исправил и все стало норм(горизонтально )