HTML/CSS Horizontales Listenmenü: Submenü korrekt ein- und ausblenden

innov8 · 20.09.2012

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:

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>

und hier noch das CSS-File:

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;
}

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

janosch01 · 20.09.2012

AW: HTML/CSS Horizontales Listenmenü: Submenü korrekt ein- und ausblenden

Hallo,
schaue Dir mal diese Seite an , jedemenge Menüs in allen variationen, die kannst Du Dir im Seitenquelltext anschauen oder runterladen. Ist ideal zum lernen oder auffrischen von CSS Menüs.
Vg Gerd

cebito · 20.09.2012

AW: HTML/CSS Horizontales Listenmenü: Submenü korrekt ein- und ausblenden

innov8 schrieb:
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.

Genau so ist es. Das ganze ist mir eh ein wenig zu aufgeblasen, wenn du überall die gleiche Klasse verwendest kannst sie genau so gut gleich ganz weglassen und die ul und li mit ganz normalen Selektoren ansprechen. Ansonsten kannst du sowas machen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
<style>
li:not(.std) ul,li:hover~.std ul{display:none;}
li:hover ul{display:block;}
</style>
</head>
<body>
<ul>
    <li>normal 1
        <ul>
            <li>jetzt ist der andere weg, ich wollte auch mal</li>
        </ul>
    </li>
    <li>normal 2
        <ul>
            <li>ich auch...</li>
        </ul>
    </li>
    <li class="std">standard
        <ul>
            <li>du siehst mich immer, außer du hoverst meine Konkurrenz</li>
        </ul>
    </li>
</ul>
</body>
</html>

Das funktioniert aber nur, wenn .std an letzter Stelle ist, da der Nachbarselektor nur auf nachfolgende Elemente anwendbar ist...

nierewa · 23.09.2012

AW: HTML/CSS Horizontales Listenmenü: Submenü korrekt ein- und ausblenden

Vielleicht habe ich es übersehen, aber hast Du eine line-height vergeben?
Die ist wichtig. Hat mir gerade beim IE schon paar mal alles zerhauen.

Ansonsten habe ich die Möglichkeit mit pseudoklassen entdeckt.
Hie mal ein Link dazu: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Ich würde nicht für alles die gleichen Klassen verwenden.

cebito · 24.09.2012

AW: HTML/CSS Horizontales Listenmenü: Submenü korrekt ein- und ausblenden

nierewa schrieb:
Vielleicht habe ich es übersehen, aber hast Du eine line-height vergeben?
Die ist wichtig. Hat mir gerade beim IE schon paar mal alles zerhauen.

Und das hat was mit der Fragestellung zu tun?

nierewa schrieb:
Ansonsten habe ich die Möglichkeit mit pseudoklassen entdeckt.
Hie mal ein Link dazu: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

Die nutzen hier aber nix