✔ Navigation mit dritter Ebene

S

Saskia81

Grünschnabel
Hallo hab ein Problem mit meiner Navigationsleist in dritter Ebene. 1 und 2 funktioniert, nur die dritten Ebene soll auch erst aufklappen wenn man mit dem Curser drauf geht.

Hier mal der HTML-Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link href="css/dual.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="menu">

    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="symptome.html">Symptome</a>
        <ul>
          <li><a href="symptome-klein.html">Symptome</a>
          <li><a href="erscheinungsbilder.html">Erscheinungsbilder</a></li>
        </ul>
      </li>
      <li id="ausloeser"><a href="ausloeser.html">Auslöser</a>
        <ul>
          <li id="kuenstliche"><a href="kuenstliche.html">künstliche Stoffe</a></li><br />
          		<ol id="umweltgifte"><a href="umweltgifte.html">Umweltgifte</a></ol>
                <ol id="chemikalien"><a href="chemikalien.html">Chemikalien</a></ol>
                <ol id="staeube"><a href="staeube.html">Stäube</a></ol><br />
          <li id="natuerliche"><a href="natuerliche.html">natürliche Stoffe</a></li><br />
          		<ol id="schimmelpilze"><a href="schimmelpilze.html">Schimmelpilze</a></ol>
                <ol id="pollen"><a href="pollen.html">Pollen</a></ol>
                <ol id="staeubezwei"><a href="staeube.html">Stäube</a></ol>
          <li id="umwelteinfluesse"><a href="umweltanfluesse.html">Umwelteinflüsse</a></li><br />
          		<ol id="laerm"><a href="laerm.html">Lärm</a></ol>
                <ol id="elektrosmog"><a href="elektrosmog.html">Elektrosmog</a></ol>
                <ol id="licht"><a href="licht.html">Licht</a></ol>
          <li id="sonderfall"><a href="sonderfall.html">Sonderfall der kindliche Organismus</a></li>
        </ul>
      </li>
      <li id="leistungen"><a href="leistungen.html">Leistungen</a>
        <ul>
          <li id="allgemeine"><a href="allgemeine.html">Allgemeine Leistungen</a></li><br />
          <li id="belastungsprofil"><a href="belastungsprofil.html">Das persönliche Belastungsprofil</a></li><br />
          <li id="schlafanalyse"><a href="schlafanalyse.html">Schlafanalyse</a></li><br />
          <li id="industrie-gewerbe"><a href="industrie-gewerbe.html">Leistungen für Industrie und Gewerbe</a></li><br />
        </ul>
      </li>
      <li id="team"><a href="team.html">Team</a></li>
      <li id="kontakt"><a href="kontakt.html">Kontakt</a></li>
  </ul>
</div>
</body>
</html>


und die CSS-Datei:
CSS: 
.menu {
font-size:90%;
margin:25px 0 50px 15px;
z-index:1000;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
width:150px;
}
.menu ul {
margin-left:0;
}
.menu li {
background:#D4D8BD none repeat scroll 0 0;
height:26px;
position:relative;
}
.menu table {
border-collapse:collapse;
font-size:1em;
left:0;
position:absolute;
top:0;
z-index:100;
}
.menu a, .menu a:visited {
border-color:#FFFFFF;
border-style:solid;
border-width:0 1px 1px 0;
color:#000000;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
text-indent:5px;
width:149px;
}
.menu a, .menu a:visited {
background:#D4D8BD none repeat scroll 0 0;
width:149px;
}
.menu a:hover {
background:#949E7C none repeat scroll 0 0;
color:#FFFFFF;
}
.menu :hover > a {
background:#949E7C none repeat scroll 0 0;
color:#FFFFFF;
}
.menu ul ul {
left:150px;
position:absolute;
top:0;
visibility:hidden;
}
.menu ul li:hover ul, .menu ul a:hover ul {
visibility:visible;
}
.menu ul :hover ul ul {
visibility:hidden;
}
.menu ul :hover ul :hover ul ul {
visibility:hidden;
}
.menu ul :hover ul :hover ul {
visibility:visible;
}
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}


Wäre schön wenn mir jemand helfen könnte...
Danke!
 
Zuletzt bearbeitet von einem Moderator:
Die Ursache findet sich in deinem invaliden Markup, wo du mittendrin <li></li>-Tags durch <ol></ol>-Tags ersetzt hast, die an dieser Stelle nichts zu suchen haben.

Daher funktionieren bei dir die Selektoren auch nicht mehr störungsfrei.

Achja, eine dritte Ebene existiert derzeit in deinem Menü überhaupt nicht.

mfg Maik
 
Zur Verdeutlichung, mit diesem regelkonformen (validen) Markup wird die dritte Menüebene erst beim Überfahren des Menüpunktes der zweiten Ebene sichtbar.

In diesem HTML-Code hab ich mal für den Untermenüpunkt "Erscheinungsbilder" ein weiteres Untermenü eingerichtet, da ja bislang überhaupt keine dritte Ebene in diesem Menü existiert.

HTML: 
<div class="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="symptome.html">Symptome</a>
        <ul>
          <li><a href="symptome-klein.html">Symptome</a></li>
          <li><a href="erscheinungsbilder.html">Erscheinungsbilder</a>
             <!-- Von mir zu Demonstrationszwecken als dritte Menüebene eingefügt -->
             <ul>
                 <li><a href="#">EB 1</a></li>
                 <li><a href="#">EB 2</a></li>
             </ul>
          </li>
        </ul>
      </li>
      <li id="ausloeser"><a href="ausloeser.html">Auslöser</a>
        <ul>
          <li id="kuenstliche"><a href="kuenstliche.html">künstliche Stoffe</a></li>
          <li id="umweltgifte"><a href="umweltgifte.html">Umweltgifte</a></li>
          <li id="chemikalien"><a href="chemikalien.html">Chemikalien</a></li>
          <li id="staeube"><a href="staeube.html">Stäube</a></li>
          <li id="natuerliche"><a href="natuerliche.html">natürliche Stoffe</a></li>
          <li id="schimmelpilze"><a href="schimmelpilze.html">Schimmelpilze</a></li>
          <li id="plilen"><a href="plilen.html">Plilen</a></li>
          <li id="staeubezwei"><a href="staeube.html">Stäube</a></li>
          <li id="umwelteinfluesse"><a href="umweltanfluesse.html">Umwelteinflüsse</a></li>
          <li id="laerm"><a href="laerm.html">Lärm</a></li>
          <li id="elektrosmog"><a href="elektrosmog.html">Elektrosmog</a></li>
          <li id="licht"><a href="licht.html">Licht</a></li>
          <li id="sonderfall"><a href="sonderfall.html">Sonderfall der kindliche Organismus</a></li>
        </ul>
      </li>
      <li id="leistungen"><a href="leistungen.html">Leistungen</a>
        <ul>
          <li id="allgemeine"><a href="allgemeine.html">Allgemeine Leistungen</a></li>
          <li id="belastungsprofil"><a href="belastungsprofil.html">Das persönliche Belastungsprofil</a></li>
          <li id="schlafanalyse"><a href="schlafanalyse.html">Schlafanalyse</a></li>
          <li id="industrie-gewerbe"><a href="industrie-gewerbe.html">Leistungen für Industrie und Gewerbe</a></li>
        </ul>
      </li>
      <li id="team"><a href="team.html">Team</a></li>
      <li id="kontakt"><a href="kontakt.html">Kontakt</a></li>
  </ul>
</div>


mfg Maik
 
Danke! Das mit der dritten Ebene hatte ich schon geändert, allerdings funktioniert es auch nur beim 2ten und 3ten Fall der dritten Ebene, jedoch nicht beim ersten Mal. Warum?
Hier nochmal der Code:
HTML: 
<body>
		<div class="menu">
    		<ul>
		      <li><a href="index.html">Home</a></li>
     		  <li><a href="symptome.html">Symptome</a>
        			<ul>
        				<li><a href="symptome-klein.html">Symptome</a></li>
        				<li><a href="erscheinungsbilder.html">Erscheinungsbilder</a></li>
       				</ul>
      		  </li>
      
      		  <li><a href="ausloeser.html">Auslöser</a>
        			<ul>
        				<li><a href="kuenstlich.html">Künstliche Stoffe</a></li>
        					<ul>
          						<li><a href="umweltgifte.html">Umweltgifte</a></li>
          						<li><a href="chemikalien.html">Chemikalienunverträglichkeit</a></li>
          						<li><a href="staeube-kuenstlich.html">Stäube</a></li>
          					</ul>
						</li>
                        
       					<li><a href="natuerlich.html">Natürliche Stoffe</a>
          					<ul>
          						<li><a href="schimmelpilze.html">Schimmelpilze</a></li>
         						<li><a href="pollen.html">Pollen</a></li>
          						<li><a href="staeube-natuerlich.html">Stäube</a></li>
          					</ul>
						</li>
	
        				<li><a href="umwelteinfluesse.html">Umwelteinflüsse</a>
        					<ul>
          						<li><a href="laerm.html">Lärm</a></li>
          						<li><a href="elektrosmog.html">Elektrosmog</a></li>
          						<li><a href="licht.html">Licht</a></li>
          					</ul>
        				</li>
        				<li><a href="sonderfall.html">Sonderfall der kindliche Organismus</a></li>
        			</ul>
      		 </li>
             
     		 <li><a href="leistungen.html">Leistungen</a>
        			<ul>
        				<li><a href="allgemein.html">Allgemeine Leistungsbeschreibung</a></li>
        				<li><a href="belastungsprofil.html">Das persönliche Belastungsprofil</a></li>
        				<li><a href="schlafanalyse.html">Schlafanalyse</a></li>
        				<li><a href="industrie.html">Leistungen für Industrie und Gewerbe</a></li>
        			</ul>
      		  </li>
              
      		  <li><a href="team.html">Team</a></li>
      		  <li><a href="kontakt.html">Kontakt</a></li>
      	</ul>
    </div>

</body>

Und die CSS:
CSS: 
.menu {
font-size:90%;
margin:25px 0 50px 15px;
z-index:1000;
}

.menu a, .menu a:visited {
border-color:#FFFFFF;
border-style:solid;
border-width:0 1px 1px 0;
color:#000000;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
text-indent:5px;
width:149px;
}
.menu ul {
list-style-type:none;
margin:0;
padding:0;
width:150px;
margin-left:0;
}

.menu li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#D4D8BD none repeat scroll 0 0;
height:26px;
position:relative;
}

.menu ul ul {
left:150px;
position:absolute;
top:0;
visibility:hidden;
}






.menu table {
border-collapse:collapse;
font-size:1em;
left:0;
position:absolute;
top:0;
z-index:100;
}

.menu a, .menu a:visited {
background:#D4D8BD none repeat scroll 0 0;
width:149px;
}
.menu a:hover {
background:#949E7C none repeat scroll 0 0;
color:#FFFFFF;
}
.menu :hover &gt; a {
background:#949E7C none repeat scroll 0 0;
color:#FFFFFF;
}
.menu ul ul {
left:150px;
position:absolute;
top:0;
visibility:hidden;
}
.menu ul li:hover ul, .menu ul a:hover ul {
visibility:visible;
}
.menu ul :hover ul ul {
visibility:hidden;
}
.menu ul :hover ul :hover ul ul {
visibility:hidden;
}
.menu ul :hover ul :hover ul {
visibility:visible;
}
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
 
Zuletzt bearbeitet von einem Moderator:
Nutze bitte die Highlight-Tags für deine Quellcode-Präsentationen, denn sie erleichtern das Lesen ungemein.

Am Ende der ersten Zeile muß der rotmarkierte schliessende </li>-Tag entfernt werden, da im Anschluß ein Untermenü folgt:
Code: 
<li><a href="kuenstlich.html">Künstliche Stoffe</a></li>
    <ul>
         <li><a href="umweltgifte.html">Umweltgifte</a></li>
         <li><a href="chemikalien.html">Chemikalienunverträglichkeit</a></li>
         <li><a href="staeube-kuenstlich.html">Stäube</a></li>
    </ul>
</li> <!-- Hier hast du ihn richtig notiert -->


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück