Guten Tag allerseits,
Ich steh gerade ein bisschen auf dem Schlauch. Folgende Situation: Ich habe eine Horizontale Navigation in welcher die Subnavigation mit hover angezeigt werden kann. Submenüs werden auf 100% Breite immer am gleichen Ort angezeigt.
Befindet man sich aber auf einer Unterseite der Ersten Hierarchiestufe, so soll das Submenü dieser Stufe immer angezeigt werden AUSSER ich bin mit :hover über einem anderen Navigationseintrag, dann soll das Submenü der entsprechenden Kategorie angezeigt werden, die Aktuelle Kategorie wird versteckt.
Mit JavaScript liesse sich die ganze Sache sehr einfach machen, aber ich bin eigentlich Überzeugt, dass auch eine CSS-Lösung machbar sein sollte.
Mir ist bewusst dass diese Beschreibung etwas Verwirrend ist, am besten schaut ihr es euch hier selbst einmal an. Dies ist nur ein Beispiel, Links und Bilder Funktionieren nicht!
Hier noch der Relevante Code ohne Textformatierung damit ihr euch nicht durch den Code graben müsst.
<ul id="nav_main">
<li class="work"><a href="/debora_tests/">Work</a>
<ul class="nav_sub">
<li><a href="/debora_tests/category-Drawings">Drawings</a></li>
<li><a href="/debora_tests/category-Fabrics">Fabrics</a></li>
<li><a href="/debora_tests/category-Objects">Objects</a></li>
<li><a href="/debora_tests/category-Pictures">Pictures</a></li>
<li><a href="/debora_tests/category-Products">Products</a></li>
<li><a href="/debora_tests/category-Space">Space</a></li>
<li><a href="/debora_tests/category-Structures">Structures</a></li>
<li class="last_child"><a href="/debora_tests/category-Words">Words</a></li>
</ul>
</li>
<li class="inspiration">Inspiration
<ul class="nav_sub">
<li>Moments</li>
<li>Thoughts</li>
<li class="last_child">Links</li>
</ul>
</li>
<li class="vita">Vita
<ul class="nav_sub">
<li>Education</li>
<li>Organization</li>
<li>Realization</li>
<li>Skills</li>
<li>Languages</li>
<li class="last_child">Interests</li>
</ul>
</li>
<li class="last_child">Contact</li>
</ul>CSS:
#container {
width: 980px;
margin: 50px auto;
}
/**********************
Navigation Styles
**********************/
#nav_main {
width: 980px;
overflow: hidden;
position: relative;
height: 100px;
}
#nav_main li {
float: left;
}
#nav_main>li {
width: 25%;
padding-top: 5px;
height: 40px;
}
#nav_main li ul {
display: none;
clear: left;
}
#nav_main>li:hover ul {
position: absolute;
top: 45px;
left: 0px;
display: block;
width: 100%;
}Hoffe mein Problem ist verständlich und freue mich auf eure Antworten.
Gruss,
-Lukas