下拉菜单栏的CSS z-index属性

Question

I have a drop down menu bar. But it is always behind my content no matter how high I set the z-index of the bar or if I set the z-index of my content to -1. Can anybody help?

I did set the z-index to 500 where I do the hover of my navigation top menu but no change. Could it be because of the reset code I use in the beginning of my CSS code?

Here is my CSS Code:

/*navigation.xhtml; author: Mica */
#navigation {
    float:left;
    width:100%;
    height:18px;    
    margin:15px 0 25px;
}
#navigation ul {
    list-style-type:none;
    list-style-image:none;
    padding:0px;
    float:left;
    width: 100%;
}
#navigation li.topmenu {
    float:left;
    width:170px;
}
.topmenu a {
    float:left;
    width:100%;
    text-align:center;
}
.topmenu ul {
    float:left;
    display:none;
    width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
    padding:3px 0;
    border:1px solid #C27000;
    color:#FFFFFF;
    font-weight:bold;
    text-decoration:none;
    background-color:#FF8C00;
    margin:0;
    font-weight:bold;
}
.submenu a{
    width:100%;
    clear:both;
    postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
    background-color:#FFA500;
}
.topmenu:hover ul {
    display:block;
    z-index:500;
}
#logo a:hover {
    opacity:0.8;
}

/*content in basicTemplate.xhtml; author: Mica */
#content {
    float:left;
    min-height:200px;
    margin:0 7px;
}

Answer 1

HAHAAA found it! z-index only works when a position is declared first: so I need to set in this block a position:

.topmenu:hover ul {
    display:block;
    z-index:500;
}

Like here:

.topmenu:hover ul {
    display:block;
    position:relative;
    z-index:500;
}