Hallo zusammen,
ich bastel hier grad an meiner Fotohomepage und bin am Menü. Ich muss gestehen ich hab von CSS nicht wirklich Ahnung. Ich hab also ein horizontales Menü mit 5 Hauptpunkten. Drei dieser Hauptpunkte haben nun vertikale Unterpunkte. Bis hierhin war noch alles per Tutorial ganz gut machbar. Jetzt kommt aber die Schwierigkeit, dass eines der Untermenüs über weitere Unterpunkte verfügen soll. Das Problem ist nun, dass diese 3. Ebene exakt über der zweiten Ebene liegt (vertikal) und daher Punkte dieser 2. Ebene verdeckt. Meine Wunschvorstellung ist nun, dass die 3. Ebene rechts von der 2. Ebene runter klappt. Ich hoffe, ich hab mich einigermaßen verständlich ausgedrückt. Wäre echt super, wenn mir hier jemand helfen könnte.
<nav>
<ul>
<li class = "cat1">
<a href="index.shtml">Home</a>
</li>
<li class = "cat2">
<a href="ueber_mich.shtml">über mich</a>
<ul>
<li><a href="#">ich stelle mich vor</a></li>
<li><a href="#">meine Hardware</a></li>
</ul>
</li>
<li class = "cat3">
<a>Galerien</a>
<ul>
<li><a href="ramona.shtml">Ramona</a>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
</ul>
</li>
<li><a href="yvonne.shtml">Yvonne</a></li>
<li><a href="franzi.shtml">Franzi</a></li>
<li><a href="micu.shtml">Micu</a></li>
<li><a href="rami.shtml">Rami</a></li>
<li><a href="irland.shtml">Irland</a></li>
<li><a href="gemischtes.shtml">Gemischtes</a></li>
</ul>
</li>
<li class = "cat4">
<a href="gaestebuch.shtml">Gästebuch</a>
</li>
<li class = "cat5">
<a>Impressum</a>
<ul>
<li><a href="impressum.shtml">Haftungsausschluss</a></li>
<li><a href="datenschutz.shtml">Datenschutz</a></li>
</ul>
</li>
</ul>
</nav>nav {
width: auto;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul li {
list-style: none;
float:left;
}
nav ul li a {
background-color: #000000; /* Menüfarbe ohne hover*/
text-decoration: none;
display: block;
color: #FFFFFF; /* Textfarbe ohne hover oben weiss*/
font-size: 110%;
padding: 5px 14px;
transition: background 0.3s ease-out; /* explorer 10 */
-webkit-transition: background 0.3s ease-out; /* chrome & safari */
-moz-transition: background 0.3 ease-out; /* firefox */
-o-transition: background 0.3 ease-out; /* opera */
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a {
background-color: #a5a9ac;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a {
background-color: #a5a9ac;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
background-color: #a5a9ac;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
background-color: #a5a9ac;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
background-color: #a5a9ac;
}
nav ul li:hover > a {
color: #FFFFFF; /* Textfarbe hover weiss*/
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a {
color: #FFFFFF; /* dropdown Textfarbe ohne Auswahl weiss*/
}
nav ul li ul li a:hover{
background-color: #000000 !important; /* dropdown Auswahl Hintergrundfarbe schwarz*/
}Danke! Grüße, Mike