drop down меню

[sixth sense]

Здравейте.

Направих си едно drop-down меню в wordpress, което да ми изкарва категориите, но проблема е, че не иска да седи on-top, така да се каже.
Като мина с мишката през него и се 'спусне' - не остава отгоре, а минава под долния елемент.

Кода ми е следният..
HTML:

<div id="menu">
<ul>
<li><a href="#">Категории</a>
<ul>
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
</ul>
</li>
</ul>
</div>

CSS:

#menu{
padding: 0;
margin: 0;
}
#menu ul{
padding: 0;
margin: 0;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
} 

#menu li a{
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
} 

#menu li a:hover{
background-color: blue;
} 

#menu ul ul{
position: absolute;
top: 30px; 
visibility: hidden;
} 

#menu ul li:hover ul{
visibility: visible;
}

Някакви идеи как може да се оправи?

 

[contra]

От: drop down меню

Добави малко в първото:

#menu {
    margin: 0;
    padding: 0;
[B]    position: relative;
    z-index: 3;[/B]
}

A ако искаш съпорт и за ИЕ7 и надолу, добави в следващия елемент в ХТМЛ-а (тоя дето не ще да седи отдолу - не е отбелязан горе тъй че не знам какъв е):

position: relative;

 

[sixth sense]

Сега е добре.
Благодаря.