Hallo,
ich habe mit meiner Navi ein Problem und hoffe dass ihr mir helfen könnt.
Also, der Code müsste (automatisch) durch die CSS erkennen das ein Untermenü da ist und das irgendwie anzeigen.
Also Beispiel: Auf meiner Testseite ist ein Link "Leistungen" unterhalb befinden sich Links.
Ich habe im HTML ein Bild welches anzeigen soll das Unterseite da sind.
HTML
<li><a href="#"><img src="img/li.png" alt="" class="li-klein" /> Leistungen</a>
Das geht so weit. Ich muss nur, wenn ich weitere Unterseiten an anderer Stelle erstellen möchte das Bild jedes Mal mit der Hand in den HTML Code einfügen.
Das möchte ich so ändern, das eine CSS Einstellung besteht, die ein Bild oder was auch immer, automatisch einfügt, sobald der Code erkannt wird.
Also:
HTML
<nav id="nav">
<ul id="navi">
<li class="seite"><a href="index.php" title="Startseite">Startseite</a></li>
<li><!-- Hier soll das Bild sein. Z.B. --> <a href="#">Leistungen</a>
<ul>
<li><a href="#" title="Webdesign">» Eine Seite</a></li>
<li><a href="#" title="Fotodesign">» Seite</a></li>
<li><a href="#" title="Fotoservice">» Noch eine Seite</a></li>
</ul>
</li>
<li><!-- Hier soll das Bild sein. Z.B. --> <a href="#">Was anderes</a>
<ul>
<li><a href="#" title="Webdesign">» Eine Seite</a></li>
<li><a href="#" title="Fotodesign">» Seite</a></li>
<li><a href="#" title="Fotoservice">» Noch eine Seite</a></li>
</ul>
</li>
<li><a href="#" title="Kontakt">Kontakt</a></li>
<li><a href="#" title="Impressum">Impressum</a></li>
</ul>
</nav><!-- ende navi -->
</div> <!-- ende header -->
Das ist der HTML Code wie er jetzt ist.
HTML
<nav id="nav">
<ul id="navi">
<li class="seite"><a href="index.php" title="Startseite">Startseite</a></li>
<li><a href="#"><!-- Hier ist das Bild. --> <img src="img/li.png" alt="" class="li-klein" /> Leistungen</a>
<ul>
<li><a href="#" title="Webdesign">» Eine Seite</a></li>
<li><a href="#" title="Fotodesign">» Seite</a></li>
<li><a href="#" title="Fotoservice">» Noch eine Seite</a></li>
</ul>
</li>
<li><a href="#" title="Kontakt">Kontakt</a></li>
<li><a href="#" title="Impressum">Impressum</a></li>
</ul>
</nav><!-- ende navi -->
</div> <!-- ende header -->Hier noch der CSS Code
Code
#nav{
max-width:800px;
margin: auto;
}
#navi li{
float:left;
display:inline;
font-family: 'PT Sans', sans-serif;
letter-spacing: 0.2em;
}
#navi ul{
width:180px;
list-style: none;
position: absolute;
}
#navi li ul{
display:none;
}
#navi li ul li{
float:left;
width:180px;
background: #2F2F2F url(../img/header.png);
border-bottom:1px solid #3F3F3F;
}
#navi li a{
padding:30px 22px 15px 22px;
font-size : 0.9em;
color:#DFDFDF;
text-decoration:none;
display:block;
border: none;
}
#navi li.seite a{
color:#FFFFD5;
}
#navi li ul li a{
padding:15px;
color:#FFFFFF;
text-decoration:none;
display:block;
}
#navi li:hover ul{
display:block;
}
#navi li a:hover, a.seite:hover{
background: #2F2F2F;
color: #00A179;
}
Liebe Grüße
Andre