Что прописать в CSS для правильного отображения выпадающего меню?

[webx]

Здравствуйте!
Помогите, пожалуйста, разобраться с css кодом. Проблема с всплывающим меню 3 уровня.
сайт http://zarden.ru/blog1/index/

когда нажимаешь АВТОМОБИЛИ - LIFAN BREEZ СЕДАН -- НАДЕЖНОСТЬ & БЕЗОПАСНОСТЬ(эта строчка налазит на предыдущую)

Подскажите, пожалуйста, что и где прописать, уже 3 сутки мучаюсь

Это код css

/*общий стиль блока меню*/
#menu {
height: 60px;
background: #3C3C3D;


clear: both;
font-size: 14px;
}

/*стиль ссылок в меню*/
#menu li a{
color: #fff;
display: block;
line-height: 55px;
padding: 0 23.2px;
height: 60px;

}
#menu li a:hover {
background: #07599d;
text-decoration: none;

}

/*стиль для элементов первого уровня, т.е. дочерних страниц*/
#menu li {
list-style: none;
float: left;

}

/*стиль для элементов дочернего меню*/
#menu li ul li {
float: none;

}
#menu ul {
background: #4182b8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;

}



/*строка display:none прячет выпадающее меню*/
#menu ul{
display: none;
background: #4182b8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;
width: 215px;
}




#menu a {
display: block;

height: 40px;
margin: 1px 0px 0px 0px;
padding: 20px 37px 0 37px;
background: url(images/img05.gif) repeat-y left top;
text-decoration: none;
text-transform: capitalize;
font-size: 12px;
color: #FFFFFF;
}


#menu .children li:hover ul{
margin-left: 215px;
margin-top: -60px;
}

Похоже, что код раскрывает все теги ul, вложенные в "#menu li" . а надо чтобы раскрывало только дочерние теги ul.

Как же это сделать????

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("#menu li").hover(

function(){
jQuery(this).find('ul').show('slow');
},

function(){
jQuery(this).find('ul').hide();
}
);
});
</script>