Hallo Webdesigner,
ich stehe vor einem Problem, da ich diese art der Navigation zuvor noch nie gesehen habe.
Ich möchte eine Navigation in Html5 und css3 erstellen, dass mehrere "Level" hat. Die Menüpunkte sollen vertikal sein und die Untermenüpunkte sollen rechts daneben ebenso in Vertikaler form stehen.
Das ganze soll eine bestimmten Kasten nicht überschreiten, d.h. sobald ich mit der Maus auf einem anderen Menüpunkt bin, dürfen die vorherigen nicht mehr zu sehen sein.
Mein Problem ist, dass die Menüpunkte alle gleichzeitig im 2. Kasten zu sehen sind und wenn ich mit der Maus über den 2. Kasten gehe, geht der letze Listenpunkt im 1. Kasten in den "Hover" zustand.
Ich hoffe ich konnte es erklären. Zur Verdeutlichung füge ich weiter Unten eine Grafik hinzu.
[Blockierte Grafik: http://s1.directupload.net/images/131108/6mgtf5p3.jpg]
Hier meine bisheriger Code:
<nav class="nav">
<ul class="kasten-1">
<li><a href="#">Startseite</a></li>
<li><a href="#">Unternehmen ></a>
<ul class="kasten-2">
<li><a href="#">Geschichte</a></li>
<li><a href="#">Philosophie</a></li>
<li><a href="#">Team</a></li>
</ul></li>
<li><a href="#">Kompetenz</a></li>
<li><a href="#">Referenz ></a>
<ul class="kasten-2">
<li><a href="#">Thema</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Videos</a></li>
</ul></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Kontakt</a>
<ul class="kasten-2">
<li><a href="#">dafs</a></li>
<li><a href="#">asdf</a></li>
<li><a href="#">Animationen</a></li>
</ul></li>
</ul>
</nav>.nav,
.nav ul,
.nav li,
.nav a {
font-family: helvetica;
margin: 0;
padding:0;
border: none;
outline: none;
}
.nav {
/* margin-top: 9px; */
width: 960px;
height: 151px;
background-image:url(image/navlogobar.jpg);
clear: both;
}
/* +++ Kästchen +++ */
.nav ul {
width: 151px;
height: 151px;
list-style: none;
}
.nav li {
margin: 0;
width: 157px;
height: 24px;
margin-left: -6px;
display: block;
}
nav ul:first-child {
padding-top: 6px;
}
.nav li a {
text-decoration: none;
font-size: 15px;
color: black;
font-weight: 400;
padding-left: 20px;
}
.nav li:hover { background-image: url(image/nav_hover.png);}
.nav li:hover > a {color: white;}
.nav li:active {background-image: url(image/nav_hover.png);}
.nav li:active > a {color: white;}
.kasten-1 a:hover > li {
}
ul.kasten-2 {
padding: 0;
height: 151px;
margin-left: 167px;
position: absolute;
top:501px;
display:block;
}
/*ul.kasten-2 li {
height: 0;
overflow: hidden;
}*/
ul.kasten-2 li:hover > li {
/* opacity: 1; */
}
ul.kasten-2 li:hover > ul li {
height: auto;;
overflow: visible;
}