[doc33flo]

Hallo miteinander,

habe ein Problem mit einem CSS-Menü. Und habe ich den das Menü so umgebaut, dass es nicht mehr nach untern, sondern nach oben auf geht. Nun sollte im besten Fall die Leiste (weiß) auf dem die Hauptmenüpunkte liegen im Vordergrund sein, was leider nicht der Fall ist. Es ist immer der Block mit dem halbtransparenten gif trans_green-70.png (s. code) im Vordergrund. Habe es mit z-index versucht ohne Erfolg. Nur wenn ich dem Block einen negativen z-index verpasst habe ging es. Da hatte aber dann leider der IExplorer was dagegen. Der interpretiert wohl keinen negativen z-index. Jemand ne Idee?


* {
margin: 0;
padding: 0;
outline: none;
}
#wrapper {
margin: 100px auto 0;
width: 940px;
}
#wrapper h1 {
font-family: arial;
margin: 0 0 20px;
text-align: center;
text-shadow: 0 2px 1px #fff;
}
#wrapper p {
margin: 0 0 30px;
text-align: center;

}
#main-nav {
background: #8BCD19;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 100%);
background: linear-gradient(top, #ffffff 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
float: left;
width: 680px;
z-index: 1000;
}
#main-nav ul {
font-family: arial;
font-size: .7em;
font-weight: bold;
list-style: none;
}
#main-nav ul li {
border-left: 0px solid #999999;
float: left;
}
#main-nav ul li:first-child {
border: none;
}
#main-nav ul li a {
color: #666666;
display: block;
padding: 4px;
position: relative;
width: 122px;
text-decoration: none;

}
#main-nav ul li a span.drop-down {
height: 2px;
position: absolute;
right: 20px;
top: 24px;
width: 10px;
}
#main-nav ul a:hover {
color: #4F750D;
}
/* First Level drop-down */
#main-nav ul li ul {
display: none;
}
#main-nav ul li:hover ul {
background: url(images/trans_green-70.png);
display: block;
margin-top: -100px;
margin-left: 0px;
font-size: .9em;
font-weight: normal;
padding: 8px;
position: absolute;
}
#main-nav ul li ul li {
float: none;
display: block;
border-left: none;
position: relative;
}
#main-nav ul li ul li a {
width: 100px;
padding: 2px 7px;
border-top: dotted 1px #999999;
color: #333333;
}