css Menü: Submenu verschwindet bei Rollover

3degrees · 02.10.2012

Hallo zusammen,
ich sitze gerade an einem css Menü, habe dabei aber das Problem, dass das Submenu beim Rollover des übergeordneten Links zwar sichtbar wird, aber sobald ich dann runter in das Submenü will, verschwindet es wieder. Was hab ich vergessen?

Das css ist folgendes:

Code:

#menu { 
    position:relative;
    margin:0px auto;
    padding:5px 0px 0px 167px;
    border-bottom:#990033 1px solid;
    text-align:right;
    width:783px;
    height:24px;
}

#menu > ul {
    list-style:inside none; 
    padding:0; 
    margin:0;
} 

#menu > ul > li { /* erste Ebene */
    list-style:inside none; 
    padding:0; 
    margin:0; 
    float:left; 
    display:block; 
    position:relative;
} 

#menu > ul > li > a { /* erste Ebene Item */
    outline:none; 
    display:block; 
    position:relative; 
    height:20px;
    padding:0; 
    font-size:14px;
    font-weight:normal;
    text-decoration:none; 
    color:#32271e;
    display: table-cell;
    vertical-align: middle;
} 

#menu > ul > li > a:hover { /* erste Ebene Item */
    color:#990033;
} 

#menu > ul > li > a:after {  /* erste Ebene Item */
    content:''; 
    position:absolute;   
    z-index:99;
} 

#menu ul li.has-sub:hover > a:after { /* erste Ebene hat sub */
} 

#menu > ul > li.has-sub > a:before { /* erste Ebene hat sub */
    content:''; 
    position:absolute; 
} 

#menu > ul > li.has-sub:hover > a:before { /* erste Ebene hat sub */
} 

#menu ul li.has-sub:hover > a { /* erste Ebene hat sub */  
    z-index:999; 
} 

#menu ul li.has-sub:hover > ul, #menu ul li.has-sub:hover > div { /* erste Ebene hat sub */
    display:block;
} 

#menu ul li.has-sub > a:hover { /* erste Ebene hat sub */
    text-decoration:none;
} 

#menu ul li > ul, #menu ul li > div { /* Subnav UL */
    display:none; 
    width:auto; 
    position:absolute; 
    top:25px; 
    padding:10px 5px 10px 5px;; 
    border-radius:0 0 5px 5px; 
    z-index:999;
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,.8);
    background-color: transparent\9;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
    zoom:1;
} 

#menu ul li > ul { /* Subnav UL */
    width:150px;
    text-align:left;
} 

#menu ul li > ul li { /* Subnav Item */
    display:block; 
    list-style:inside none;
    padding:0; 
    margin:0; 
    position:relative;
} 

#menu ul li > ul li a { /* Subnav Item */
    outline:none; 
    display:block; 
    position:relative; 
    margin:0; 
    padding:15px 0px 0px 15px;; 
    font-size:12px; 
    font-family: Arial, Helvetica, sans-serif; 
    color:#333333; 
    text-decoration:none; 
} 

#menu > ul > li > ul > li a:hover { /* Subnav Item hover */
    background:#ffffff;
    color:#999900;  
}

und der html Code dazu sieht so aus:

Code:

 <nav id="menu">
     <ul>
      <li><a href='#'><span>Startseite</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li><a href='#'><span>Biografie</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li><a href='#'><span>Konzerte</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li class="has-sub"><a href='#'><span>Ensembles</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a>
       <ul>
         <li><a href='#'><img src="img/nav-bullet-weiss.png" width="13" height="6" alt="" class="menu" /><span>Arpa Vocale</span></a></li>
         <li><a href='#'><img src="img/nav-bullet-weiss.png" width="13" height="6" alt="" class="menu" /><span>Cuerda Cantabile</span></a></li>
       </ul>
      </li>
      <li><a href='#'><span>Pädagogik</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li><a href='#'><span>Fotogalerie</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li><a href='#'><span>Hörproben</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li><a href='#'><span>Presse</span><img src="img/nav-bullet.png" width="13" height="6" alt="" class="menu" /></a></li>
      <li><a href='#'><span>Kontakt</span></a></li>
    </ul>
   </nav>

Ich habe schon mehrere Varianten für ein CSS Menü ausprobiert, aber immer das gleiche Problem

.

Myhar · 02.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Der Fehler liegt wie so oft beim:
position:absolute; (von #menu ul li > ul, #menu ul li > div { /* Subnav UL */ )
Durch die absolute positionierung wird das Untermenü aus dem Dokumentfluß genommen und wenn du über das Untermenü hoverst, kommst du aus dem ersten li. Soweit zur komplizierten technischen Erklärung.
Hab dir auch noch ein , vielleicht ist das besser für dich?

3degrees · 02.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

merci!

Ich hab das Menü mal ausprobiert, soweit so gut. Aber sobald ich dasNavigations-Div relativ positioniere (auch wenn ich ein div drum herum baue) hab ich das Problem wieder:/.

Ich hab es jetzt in den Griff gekriegt, indem ich ein bottom-padding ins #menu > ul > li > a eingefügt habe. Im IE und in Opera klappt das aber leider nicht

.

Myhar · 03.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Ein "klappt leider nicht" hilft leider nicht wirklich zur Fehlerbehebung.
Ein einfaches umstellen der Position von absolute auf relative ist wohl auch nicht die wahre Lösung (wie du schon ausprobiert hast)
Wenn du dein Problem genauer erläutern kannst, dann kann man dir auch helfen. Am Besten wäre, ein Onlinebeispiel, damit wir das nicht nachbauen müssen

3degrees · 03.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Ich hab die Seite mal hochgeladen:

Es geht um den "Ensembles" Link bzw. das Submenu. Wenn man mit der Maus über den Link geht, öffnet sich das Submenu (soweit so gut), sobald man dann aber mit der Maus, ins Submenü rein will, verschwindet es im IE und Opera.

Myhar · 04.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Du hast immer noch position:absolute für das Untermenü vergeben. Nimm das raus und bau das Menü zB. so nach, wie . Dort werden 9 CSS Selektoren verwendet um deinen gewünschten Effekt zu erzielen. Die musst du nur auf deine Seite übertragen und die Grafiken verwenden. Der HTML Aufbau ist sogar der Selbe wie bei dir.

Anmerkungen, die nichts mit deinem ursprünglichen Problem zu tun haben: Die img/nav-bullet.png gehören nicht als Grafik sondern im CSS als Hintergrundgrafik definiert. Grund hierfur ist simpel der, dass es sich nicht um ein Bild sondern um eine Hintergrundgrafik ohne weitere Bedeutung handelt. Auch ersparst du dir auch etwas an HTML-Code.

Auch frage ich mich, wieso der eigentliche und interessante Teil deiner HP (der Inhalt) auf so engem Raum zusammengequetscht wird. Bei einem Browser auf Vollbild ist nicht einmal die Hälfte mit Inhalt genutzt, der Rest ist leerer Raum.

3degrees · 04.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Ich hab dein Menü jetzt einfach mal so wie es ist, ist meine Seite eingefügt und damit das gleiche Problem. Sobald ich mit der Maus in das div darunter gehe, verschwindet das Submenü. Nehme ich alle nachfolgenden divs weg, klappt es auch mit meinem Menü. Daher wird das Problem dann wohl eher an meiner Seitenstruktur liegen:/. Die schau ich mir jetzt noch mal in Ruhe an.

Danke für den Tip mit den Hintergrundgrafiken in der Navi.

Die Größe der Seite richtet sich natürlich nach der Zielgruppe. Auf meinem Monitor mit einer Auflösung von 1920x1080 (oder was ich hier hab), hab ich auch viel freie Fläche. Der gemeinnützige Verein oder eine krichliche Organisation arbeitet aber häufig noch mit der kuschligen Auflösung von max. 1280x720.

Myhar · 04.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Aber du hast die veränderte Version nicht hochgeladen? Du verwendest nämlich immer noch position:absolute in deinem CSS. So lange das im CSS von der Unternavigation nicht draußen ist, wird es Probleme verursachen.

by the way: Es ist nicht "mein" Menü, sondern das erste Beispiel, welches ich durch suchen gefunden habe. Davon gibt es Varianten wie Sand am Meer. ;-) Es ist nur ziemlich genau das, was du brauchst, abgesehen von den Farben.

Bezüglich der Auflösung: Wenn man keine fixen Höhen angibt, dann passt sich die Höhe ans Browserfenster an und es schaut sowohl auf deinem (und meinem) als auf den Browsern deiner Kunden gut aus. Ok, ganz so trivial ist es doch nicht, man sollte auch min/max-height vergeben etc.
Auch kann man bei deiner Seite noch zB das Hintergrundbild für html einsparen, das wird bei den einfärbigen Flächen nicht wirklich benötigt. Aber ich schweife wieder einmal ab, das sind alles nur Verbesserungsvorschläge und haben nichts mit dem Menü zu tun.

3degrees · 04.10.2012

AW: css Menü: Submenu verschwindet bei Rollover

Tipps sind immer gut, dankeschön

. Ich hab das Webdesign ja auch nicht erfunden

.

Ich hab es hingekriegt, weiß aber nach wie vor nicht wirklich, woran es jetzt genau gelegen hat. Wenn ich mal etwas Zeit und Muße habe, bau ich das nochmal nach. Wurmt mich ja jetzt doch ein wenig.