Frage CSS MENÜ

[Wolfgang79]

Hallo Leute,

ich habe mal eine Frage, nähmlich habe ich versucht ein CSS Menü zu erstellen, welches ein Submenü enthält. Das Problem: Das Submenü klappt sofort wieder zu, sobald mal den :hover vom Div verlässt... Vll. könnt ihr mir ja helen, hier sind die Code-Schnipsel:

CSS:
.nav_subtitle {
display: none;
position: absolute;
z-index: 109;
}
.nav_content_sub {
padding: 12px;
font-weight: normal;
color: white;
background-color: #16a3fe;
width: 180px;
text-align: center;
border-bottom: 3px solid #16A3FE;
border-top: 3px solid #16A3FE;
}.nav_content_sub:hover {
border-bottom: 3px solid #0198f9;
border-top: 3px solid #0198f9;
background-color: #0198f9;
}
#nav_subtitleIDshow {
position: relative;
display: inline-block;
}
#nav_haveSub:hover + .nav_subtitle{
display: block;
}

HTML:
<div id="nav_subtitleIDshow">
<a href="/" title="" id="nav_haveSub"><div class="nav_content">Hover</div></a>
<div class="nav_subtitle">
<a href="" title=""><div class="nav_content_sub">1</div></a>
<a href="" title=""><div class="nav_content_sub">2</div></a>
</div>
</div>

Bin für jeden Ratschlag dankbar,
Vielen Dank im Voraus!!

Wünsche noch einen schönen Abend,
Sebastian

 

[SpiceLab]

Um bei der vorgegebenen HTML-Struktur zu bleiben:

#nav_subtitleIDshow:hover .nav_subtitle{
display: block;
}

Da vermutlich neben dem Hauptmenüpunkt "Hover" noch weitere folgen sollen, wird der ID-Bezeichner #nav_subtitleIDshow in den Klassenbezeichner .nav_subtitleIDshow gewandelt, da eine ID im HTML-Dokumentbaum nur einmalig enthalten sein darf. Gleiches gilt für id="nav_haveSub".

-> https://jsfiddle.net/spicelab/xg419x0x/

Die eingeschobenen <div>-Elemente in <a></a> erübrigen sich, und verschlanken den HTML-Code, wenn deren Formatierung mit display:block ergänzt, und auf <a> angewendet wird.

-> https://jsfiddle.net/spicelab/hwcnmudn/

Persönlich ziehe ich hier aber eine verschachtelte Listenstruktur vor

Siehe z.B.:

-> http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css
-> http://webdesignerhut.com/css-dropdown-menu/