CSS Submenus not positioning on top

[CassandraC]

I'm so frustrated, I HAD this so that the dropdown menus were on TOP of everything else, but for some reason now the topmenu drop downs are under the HTML images of the main menu bar

here's the website: http://dragonsbreathforge.com

The main image bar is fine, however, if you hover over Contact Us, or tutorials you'll notice that the drop downs are UNDER the HTML images in the main image bar. I have tried all number of positionings and z-indexing and honestly I'm just not seeing it.

CSS CODE

/*""""""""""""""MENU""""""""""""""*/

#topmenu {
margin:45px 0 0 0;
}

#menu{
margin: 10px auto;
padding:14px 12px 12px 20px;
width:838px;
height:28px;
background:url(WebGraphics/menubar.jpg);
background-repeat:no-repeat;
z-index: 2;

}


/*!!!!!!!!!!! Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/


.DBFclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}

.DBFdropdown {
position:relative;
z-index:10;
}

.DBFdropdown a, .DBFdropdown li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}

.DBFdropdown div a, .DBFdropdown ul a, .DBFdropdown ul li {float:none;}

.DBFsh div a {float:left;}

.DBFdropdown div{
visibility:hidden;
position:absolute;
}

.DBFdropdown li {z-index:auto;}

.DBFdropdown ul {
left:-10000px;
position:absolute;
z-index:10;
}

.DBFdropdown, .DBFdropdown ul {
list-style:none;
padding:0px;
margin:0px;

border-bottom:hidden 1px;
}

.DBFdropdown li a {float:none}

.DBFdropdown li:hover>ul{left:auto;}

#DBFMenu ul {top:100%;}

#DBFMenu ul li:hover>ul{top:0px;left:100%;}


/*"""""""" (SUB) Container""""""""*/
#DBFMenu div, #DBFMenu ul{
padding:1px;
margin:-2px 0px 0px -6px;
background-color:#A6A6A6;
border-width:2px;
border-style:double;
border-color:#313131;
}


/*"""""""" (SUB) Items""""""""*/
#DBFMenu div a, #DBFMenu ul a
{
padding:2px 5px 2px 3px;
color:#5A0000;
font-size:16px;
text-decoration:none;
font-weight:bold;
border-width:1px;
border-style:double;
border-color:#000000;
}


/*"""""""" (SUB) Hover State""""""""*/
#DBFMenu div a:hover, #DBFMenu ul a:hover
{
color:#FF0000;
background: #000;
}


/*"""""""" (SUB) Active State""""""""*/
body #DBFMenu div .DBFactive, body #DBFMenu div .DBFactive:hover{
background-color:#FF0000;
color:#FF0000;
}





/*"""""""" Sub Hover Fill Items [Static]""""""""*/
#DBFMenu div .DBFhoverfill
{
background-color:#000000;
}


/*"""""""" Custom Rule""""""""*/
div#DBFMenu div div
{
margin:0px 0px 0px -6px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

 

[ronaldroe]

Add this to #topmenu:

position:relative;
z-index:1000;