Date: 04/16/07 (WebDesign)    Keywords: html

Hey guys,

I am developing a horizontal drop menu that is positioned above an image banner. I have almost everything working the way I want, but the problem is that the drop menus appear behind the image. I have tried adding z-index, but it is not helping. Absolute positioning has it appear above as desired, but it throws the positioning off.

/*
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
float:right;
height: 45px;
padding: 70px 25px 0 0;
background: url(images/img3.gif) no-repeat right top;
}

#menu dl {
float: left;
width: 6em;
margin: 0 2px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:;
border: 1px solid #eee;
}

#menu dd {
border:;
}

#menu li {
display: inline;
text-align: center;
background:;
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: #eee;
}



and the banner (actual image is placed in html):

#splash {
width: 877px;
height: 200px;
margin: 0 auto;
background: url(images/img5.gif) repeat-x left bottom;
border-right: 20px solid #FFFFFF;
border-left: 20px solid #FFFFFF;
}
*/

Any ideas? Thanks!

Source: http://community.livejournal.com/webdesign/1245732.html