CSS Horizontal Menu lists items drop down BEHIND

[Webfoot]

I have placed a CSS Horizontal Menu across the top of my webpage successfully. Now have placed a CSS Vertical Menu inside a table two <br>'s below the Horizontal Menu. The page looks great (Link: http://www.ivanarcenaux.info/home.htm ) but the drop down lists for the Horizontal menu boxes directly above the Vertical Menu drop behind the Vertical Menu. Not good. How to fix? Below are the CSS files for both Horizontal and Vertical (these are external files).

CSS HORIZONTAL MENU:

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: center;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
border-left:0px solid #669999; border-right:1px solid #669999; border-top:1px solid #669999; border-bottom:1px solid #669999; display: block;
width: 70px; /*Width of top level menu link items*/
text-decoration: none;
background: url('http://www.ivanarceneaux.info/menubg.gif') repeat-x center;
color: navy;
font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Tahoma; padding-left:8px; padding-right:8px; padding-top:2px; padding-bottom:2px
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 190px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: white repeat-x center;
}

.horizontalcssmenu ul li ul li a:hover{
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: url('menuarrow.gif') no-repeat center left;
}



* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

CSS VERTICAL MENU

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 160px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid #669999;

}

.glossymenu li{
position: relative;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 170px; /*WIDTH OF SUB MENU ITEMS*/
right: 0;
top: 0;
display: none;
}

.glossymenu li a{
color: navy;
display: block;
width: auto;
padding-left: 10px;
background: url('http://www.ivanarceneaux.info/menubg.gif') repeat-x center;
text-decoration: none; font-style:normal; font-variant:normal; font-weight:normal; font-size:10px; font-family:Tahoma; padding-right:0; padding-top:5px; padding-bottom:5px
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: url('http://www.ivanarceneaux.info/menuarrowtoright.gif') no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: navy;
font-weight: normal;
padding: 2px 5px;
border-width: 0 1px 1px 1px;

}

.glossymenu li a:hover
{
color: red;
background: white;
font-weight:normal;
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

[koyama]

Link is not working. Did you fix this issue?

[Webfoot]

I had that link mis-spelled (I am a newbie at this). In the meantime, I've had to jettison the concept of using both the horizontal menu and vertical menu on the same page. I just could not get anywhere in resolving the issue and, thus, went ahead and put all my lists into one vertical menu. I appreciate your interest in helping to resolve the issue. I will repost at a later date when I can be more helpful to my own cause. Case closed for now.

[FJbrian]

FWIW I had a similar issue and it was the Z index, flip flopping the #s

[BigBadW0LF]

Hi all,
Very new here and this is exactly the issue i am getting. im not sure what you mean about the z index but is there any way of stopping the horizontal menu to appear in front of the vertical.