Проблем с menu hover

[lub4o]

Здравейте, направих си едно меню
html

<div id="center">
	<div id="menu">
		<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a>
			<ul>
				<li><a href="#">home2</a></li>
				<li><a href="#">home2</a></li>
				<li><a href="#">home2</a></li>
				<li><a href="#">home2</a></li>
			</ul>
		</li>
		<li><a href="#">home</a></li>
		<li><a href="#">home</a></li>
		</ul>
		</div>
<div style="clear:both"></div>
<p>text text</p>
</div>

css

#center
{
width: 1000px;
margin: 0 auto;
}
#menu
{
background-color: #ccc;
height: 30px;
}
#menu ul
{
margin:0;
padding:0;
list-style:none;
}
#menu ul li
{
float: left;
display: block;
}
#menu ul ul li
{
    display: none;
}
#menu ul li:hover ul li
{
display: block;
float: none;
position:relative;
color: #000;
}

Когато мина с мишката над линка, за да ми се покаже падащото меню, то се показва, но ако има текст или див и всичко останало ПОД менюто - след като падащото се появи го избутва надоло.

Как мога да избегна този проблем и по - добре ли е да се ползва JS за drop down меню ?

 

[adrian]

#menu ul li
{
float: left;
display: block;
position: relative;
}
#menu ul li:hover ul li
{
display: block;
float: none;
position:absolute;
color: #000;
}

Иначе аз ползвам Superfish, защото усилията по кодирането ти са сведени до минимум
http://users.tpg.com.au/j_birch/plugins/superfish/#examples

 

[lub4o]

#menu ul li
{
float: left;
display: block;
position: relative;
}
#menu ul li:hover ul li
{
display: block;
float: none;
position:absolute;
color: #000;
}

Иначе аз ползвам Superfish, защото усилията по кодирането ти са сведени до минимум
http://users.tpg.com.au/j_birch/plugins/superfish/#examples

Пробвах вече така, но се получава едно гадно нареждане на линковете.

Всичките са един върху друг.

 

[adrian]

#menu ul li:hover ul
{

position:absolute;

}

Вярно, че трябва да е ul с position: absolute иначе пробвай superfish

 

[lub4o]

#menu ul li:hover ul
{

position:absolute;

}

Вярно, че трябва да е ul с position: absolute иначе пробвай superfish

Благодаря

И все пак решението

#menu li ul
{
position: absolute;
left: 0px;
top: 30px;
display: none; 
}
#menu ul li:hover ul li
{
display: block;
float: none;
}