Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 25.06.2010, 13:46
usm usm ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.06.2010
Beiträge: 14
usm befindet sich auf einem aufstrebenden Ast
Standard Problem mit dem Z-index / der Ebenendarstellung

Bei meiner Navi (Navitest) habe ich ein Sub-Menü und ein Sub-Sub-Menü mit Transparenzen. Leider wird das Sub-Sub-Menü - interessanterweise bis auf den oberen Menüpunkt - durch das Sub-Menü verdeckt. Ich hätte aber gern das GESAMTE Sub-Sub-Menü vorn. Entsprechende Z-index-Einstellungen helfen auch nicht. Was habe ich übersehen bzw. falsch gemacht/gedacht?
Danke vorab für eure Hilfe!

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Navitest</title>
<style type="text/css">
body {
	color: black;
	background-color: black;
}

div#Rahmen {
	float: left;
	height: 75px;
	width: 707px;
	margin-top: 50px;
}

* html div#Rahmen {  /* Korrektur fuer IE 5.x */
	width: 48.7em;
	w\idth: 47.1em;
}

div#Rahmen div {
	clear: left;
}

#abschluss {
	background-image: url(images/abschlussrund.png);
	float: left;
	height: 75px;
	width: 17px;
	background-repeat: no-repeat;
}

/* ********************************************************* Menü ***************************************************************/
 
  
  .menu { /* Anker für das gesamte Menü */
	position:relative;
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 9pt;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 23px;
	text-align: center;
}

.menu li { /* Haupt-Menüelemente */
	list-style: none;
	float: left;  /* ohne width - nach CSS 2.1 erlaubt */
	position: relative;
	z-index: 20;
}

.menu li ul { /* Untermenü */
	margin: 0;
	padding: 0;
	position: absolute;
	top: 24px;
	display: none;  /* Unternavigation ausblenden */
}

.menu li:hover ul {
	display: block;  /* Unternavigation in modernen Browsern einblenden */
}

.menu a, .menu span {
	display: block;
	position:relative;
	background-image: url(images/buttonNEU_dunkel.png); /*buttons für Standard-Leistenelemente außer "Aktuell" */
	width: 115px;  /* Breite den in li enthaltenen Elementen zuweisen */
	height: 24px;
	text-decoration: none;
	font-weight: lighter;
	color: white;
	background-color: inherit;
	z-index: 20;
}

.menu ul {
	position:absolute;
	z-index:50;
}

.menu ul a { /* Design der Submenü-Liste */
	background-image: url(images/buttonNEU_sub1-3.png);
	filter: alpha(opacity=80);
	opacity:0.8;
	text-align:left;
	padding-left: 20px;
	height: 27px;
	width: 95px;
	line-height: 28px;
	background-repeat: no-repeat;
	z-index:50;
}

.menu ul ul {
	position:absolute;
	top:0px;
	background-image: url(images/buttonNEU_sub1-3.png);
	background-repeat:no-repeat;
	opacity:0.8;
	width:115px;
	margin-left:100px;
	margin-top:3px;
	z-index:100;
}

.menu ul ul a {
	z-index:100;
	display:none;
}

.menu ul a:hover {
	background-image: url(images/buttonNEU_sub2-3.png);
	filter: alpha(opacity=80);
	opacity:0.8;
	text-align:left;
	padding-left: 10px;
	height: 27px;
	width: 105px;
	line-height: 28px;
	background-repeat: no-repeat;
}

.menu ul a:active {
	background-image: url(images/buttonNEU_sub3-3.png);
	filter: alpha(opacity=80);
	opacity:0.8;
	text-align:left;
	padding-left: 10px;
	height: 27px;
	width: 105px;
	line-height: 28px;
	background-repeat: no-repeat;
}

.menu a:hover, .menu span, li a#aktuell {
	background-image:url(images/buttonNEU_mittel.png); /* bild bei allen a:hover */
	border-color: white;
	border-left-color: black;
	border-top-color: black;
	color: white;
	background-color: gray;
}

.menu a:active, .menu span, li a#aktuell {
	background-image: url(images/buttonNEU_down.png); /* alle down-Buttons */
	border-color: white;
	border-left-color: black;
	border-top-color: black;
	color: white;
	background-color: gray;
}


   .menu ul :hover ul a {
	display: block;  /* Sub-Submenü in modernen Browsern einblenden */
	z-index:100;
}


  	.menu ul ul a:hover {
	background-image: url(images/buttonNEU_sub2-3.png);
	background-repeat:no-repeat;
	opacity:0.8;
}

.menu li ul ul a:active {
	background-image: url(images/buttonNEU_sub3-3.png);
	background-repeat:no-repeat;
	opacity:0.8;
}

li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
	background-image: url(images/buttonNEU_hell.png); /*aktuell-Button */
	color: white;
	background-color: inherit;
}

.menu li ul span {  /* aktuelle Unterseite kennzeichnen */
	background-image: url(images/buttonNEU_sub3-3.png);
	position:absolute;
	filter: alpha(opacity=80);
	opacity:0.8;
	text-align:left;
	padding-left: 20px;
	height: 27px;
	width: 95px;
	line-height: 28px;
	background-repeat: no-repeat;
}

.menu .sub_unten a {
	background-image: url(images/buttonNEU_sub3_unten.png);
}

.menu .sub_unten a:hover {
	background-image: url(images/buttonNEU_sub2_unten.png);
}

.menu .sub_unten a:active {
	background-image: url(images/buttonNEU_sub1_unten.png);
}

.menu .space a {
	background-image: url(images/buttonNEU_sub3_unten.png);
	height:7px;
}

.menu .space a:hover {
	background-image: url(images/buttonNEU_sub3_unten.png);
	height:7px;
}

.menu .space a:active {
	background-image: url(images/buttonNEU_sub3_unten.png);
	height:7px;
}

.menu .sub_oben a {
	background-image: url(images/buttonNEU_sub1_oben.png);
}

.menu .sub_oben a:hover {
	background-image: url(images/buttonNEU_sub2_oben.png);
}

.menu .sub_oben a:active {
	background-image: url(images/buttonNEU_sub3_oben.png);
}
</style>
</head>
<body>
<div id="Rahmen">
  <ul class="menu">
    <div id="abschluss"></div>
    <li><a href="#Beispiel">Home</a></li>
    <li><a href="#Beispiel">Galerien</a>
      <ul>
        <li class="space"><a href="#"></a>
        <li><a href="#Beispiel">Fotos  ›</a>
          <ul>
            <li class="sub_oben"><a href="'Submenü">Foto1</a></li>
            <li><a href="#submenue">Foto2</a></li>
            <li><a href="#submenue">Foto3</a></li>
            <li class="sub_unten"><a href="'Submenü">Foto4</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Multimedia  ›</a>
          <ul>
            <li class="sub_oben"><a href="'Submenü">Multimedia1</a></li>
            <li><a href="#submenue">Multimedia2</a></li>
            <li><a href="#submenue">Multimedia3</a></li>
            <li class="sub_unten"><a href="'Submenü">Multimedia4</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Stories</a></li>
        <li class="sub_unten"><a href="#Beispiel">Sonstiges</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Referenzen</a></li>
    <li><a href="#Beispiel">Info/Kontakt</a>
      <ul>
        <li><a href="#Beispiel">Info</a></li>
        <!-- <li><span>aktuelle Seite</span></li> -->
        <li><a href="#Beispiel">Kontakt</a></li>
        <li class="sub_unten"><a href="#Beispiel">Mehr...</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Prints & Posters</a></li>
    <li><a href="#Beispiel">Blog</a></li>
  </ul>
  <div></div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links