Hey Leute,
Nach Jahren der Abstinenz in Sachen HTML/CSS, frische ich gerade meine "Skills" wieder ein wenig auf - und mittlerweile trägt das zwar schon wieder Früchte, ich ärgere mich aber dennoch gerade an einem Problem, wo glaub ich mein Denkansatz schon der falsche ist.
Worum es geht: Ich habe eine horizontale ausgelegte Listennavigation, die folgende aufgebaut ist: Das Ganze ist eine unsortierte Liste, deren Listenitems die Hauptmenüpunkte meiner Navigation sind. Diese Hauptmenüpunkte verfügen jeweils über eine eigene, untergeordnete, unsortierte Liste, welche die Submenüpunkte für den jeweiligen Hauptmenüpunkt darstellen. Diese Submenüpunkte sind via display:hidden standardmäßig ausgeblendet und werden nur eingeblendet, wenn über den jeweiligen Hauptmenüpunkt gehovered wird. Das funktioniert auch wunderbar. Allerdings soll es so sein, dass wenn kein Hauptmenüpunkt angewählt wird, ein Standard-Submenü eingeblendet wird. Auch das funktioniert einwandfrei.
Jetzt kommt aber das Problem dabei: dieses Standard-Submenü "flackert" beim Hovern über die Links (zumindest in IE und FF). Dies erscheint mir einerseits sogar logisch, weil der Aus- und Einblendeffekt über das Hover-Attribut der Hauptmenü-Liste läuft und das Standard-Submenü ebenfalls dieser Liste untergeordnet ist - und genau da vermute ich meinen Denkfehler.
Ich suche daher nach einer Lösung, wie ich das richtig machen kann. Schön wäre, wenn ich das rein mit CSS lösen könnte, JS würde ich für die Navigation gern weitgehendst vermeiden.
Den Code habe ich (damit er etwas übersichtlicher ist), erstmal ohne viel optischem Schnickschnack vorbereitet:
und hier noch das CSS-File:
Das Ganze findet ihr hier zur Ansicht:
Würde mich freuen, wenn der/die ein oder andere da einen Lösungsansatz parat hätte!
Dankeschön!
lG, innov8
Nach Jahren der Abstinenz in Sachen HTML/CSS, frische ich gerade meine "Skills" wieder ein wenig auf - und mittlerweile trägt das zwar schon wieder Früchte, ich ärgere mich aber dennoch gerade an einem Problem, wo glaub ich mein Denkansatz schon der falsche ist.
Worum es geht: Ich habe eine horizontale ausgelegte Listennavigation, die folgende aufgebaut ist: Das Ganze ist eine unsortierte Liste, deren Listenitems die Hauptmenüpunkte meiner Navigation sind. Diese Hauptmenüpunkte verfügen jeweils über eine eigene, untergeordnete, unsortierte Liste, welche die Submenüpunkte für den jeweiligen Hauptmenüpunkt darstellen. Diese Submenüpunkte sind via display:hidden standardmäßig ausgeblendet und werden nur eingeblendet, wenn über den jeweiligen Hauptmenüpunkt gehovered wird. Das funktioniert auch wunderbar. Allerdings soll es so sein, dass wenn kein Hauptmenüpunkt angewählt wird, ein Standard-Submenü eingeblendet wird. Auch das funktioniert einwandfrei.
Jetzt kommt aber das Problem dabei: dieses Standard-Submenü "flackert" beim Hovern über die Links (zumindest in IE und FF). Dies erscheint mir einerseits sogar logisch, weil der Aus- und Einblendeffekt über das Hover-Attribut der Hauptmenü-Liste läuft und das Standard-Submenü ebenfalls dieser Liste untergeordnet ist - und genau da vermute ich meinen Denkfehler.
Ich suche daher nach einer Lösung, wie ich das richtig machen kann. Schön wäre, wenn ich das rein mit CSS lösen könnte, JS würde ich für die Navigation gern weitgehendst vermeiden.
Den Code habe ich (damit er etwas übersichtlicher ist), erstmal ohne viel optischem Schnickschnack vorbereitet:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="header_navigation">
<ul class="main_nav">
<li class="main_nav"><a class="main_nav" href="#">Main Menu 1</a>
<ul class="sub_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Main1Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main1Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main1Sub3</a></li>
</ul>
</li>
<li class="main_nav"><a class="main_nav" href="#">Main Menu 2</a>
<ul class="sub_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Main2Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main2Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main2Sub3</a></li>
</ul>
</li>
<li class="main_nav"><a class="main_nav" href="#">Main Menu 3</a>
<ul class="sub_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Main3Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main3Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Main3Sub3</a></li>
</ul>
</li>
<!-- Standard Submenu (will only be displayed, when no main menu item is selected) -->
<li class="std_nav">
<ul class="std_nav">
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub1</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub2</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub3</a></li>
<li class="sub_nav"><a class="sub_nav" href="#">Standard-Sub4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Code:
div#header_navigation {
font-size: 13pt;
text-align: center;
color: #6e6e6e;
}
div#header_navigation ul.main_nav {
list-style-type:none;
padding: 0;
margin: 0;
}
div#header_navigation li.main_nav {
display: inline;
padding: 0;
margin: 0;
}
div#header_navigation ul.main_nav li.main_nav ul.sub_nav {
position: absolute;
top: 75px;
left: 0px;
height: 35px;
width: 100%;
font-size: 11pt;
color: #6e6e6e;
display: none;
}
div#header_navigation ul.main_nav li.main_nav:hover ul.sub_nav {
display: inline-block;
padding: 0;
}
div#header_navigation li.sub_nav, li.std_nav {
display: inline-block;
padding: 0;
}
/* Standard Sub Navigation: will only be displayed, when no main menu item is selected */
div#header_navigation ul.main_nav:hover li.std_nav {
display: none;
}
div#header_navigation ul.std_nav {
position: absolute;
top: 75px;
left: 0px;
height: 35px;
width: 100%;
font-size: 11pt;
color: #6e6e6e;
padding: 0;
margin: 0;
}
/* Link styles of the main menu items */
a.main_nav:link, a.main_nav:visited {
color: #6e6e6e;
display: inline-block;
width: 250px;
height: 75px;
line-height: 50px;
text-decoration: none;
}
a.main_nav:hover {
color: #a51c30;
}
/* Link styles of the sub menu items */
a.sub_nav:link, a.sub_nav:visited {
color: #6e6e6e;
text-decoration: none;
border: 1px solid #cc0000;
padding: 15px 15px 15px 15px;
}
a.sub_nav:hover {
color: #a51c30;
border: 1px solid #00cc00;
}
Würde mich freuen, wenn der/die ein oder andere da einen Lösungsansatz parat hätte!
Dankeschön!
lG, innov8