✔ Oberster Menüpunkt aktiv

[fredolin]

Moin,

ich habe ein kleines Problem. Nun weiß ich nicht ob es hier bei CSS oder doch eher bei JavaScript hi gehört.
Mein Problem ist, bei einer Navigation mit einer Unternavigation möchte ich, das der obere Menüpunkt aktiv bleibt, wenn sich darunter ein Untermenü erscheint.

Hier mal kurz mein e COdes dazu.

ul.topnav   {margin:0;padding:0;width:100%;list-style:none;float:left;}
ul.topnav li   {margin:0 10px 0 0;pdding:6px;height:38px;float:left;}
ul.topnav a:link,a:focus,a:visited,a:active     {margin:0;padding:8px;width:auto;height:25px;line-height:25px;display:block;float:left;text-decoration:none;color:#FFF;}
ul.topnav a:hover                 {border-bottom:1px solid #8B795E;color:#921520;text-decoration:none;background-color:#a6e319;}

ul.topnav div   {display:none;}
ul.topnav li:hover div {display:block;}

.subbox   {margin:41px 0 0 -2px;padding:5px;width:265px;position:absolute;background-color:#a6e319;color:#FFF;border-left:2px solid #921520;border-bottom:2px solid #921520;border-right:2px solid #921520;}


ul.submenu   {clear:both;margin:0;padding:0;display:compact;list-style:none;position:relative;}
ul.submenu li   {margin:5px;padding5px;width:245px;height:35px;border:1px solid #FFF;}

ul.submenu a:link,a:focus,a:visited,a:active   {margin:-1px 0 0 -1px;padding:6px;width:231px;height:21px}
ul.submenu a:hover   {border:2px solid #921520;background:none;}

<ul class="topnav">
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Blindtext</a>
           <div class="subbox opacity75">   
             <ul class="submenu">
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
             </ul>
           </div>
         </li>
         <li><a href="#">Blindtext</a>
           <div class="subbox opacity75">
             <ul class="submenu">
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
               <li class="gray50"><a href="#">Blindtext</a></li>
             </ul>
           </div>
         </li>
</ul>

Wenn ich mit der Maus über die Menüpunkte fahre und dann bei den Submenüs mit der Maus bin, dann sollte der dazu gehörige Hauptmenüpunkt aktiv mit einer Hintergrundfarbe aktiv bleiben.

Das Submenu hat eine grünliche Hintergrundfarbe(background-color:#a6e319 diese Farbe sollte auch dann der dazu gehörige Hauptmenüpunkt haben, wenn ich mit der Maus im Submenü bewege.

Kann mir da jemand helfen oder denkanstöße geben.
Ich bedanke mich sehr auf Eure Mithilfe..Danke

LG fredolin

 

[SpiceLab]

Ergänze hierfür den bestehenden Selektor wie folgt:

ul.topnav li:hover a, ul.topnav a:hover  {...}

Desweiteren sind mir zwei Tippfehler bei der padding-Eigenschaft aufgefallen:

ul.topnav li   {... pdding:6px; ...}
...
ul.submenu li   {... padding5px; ...}

Und die korrekte Reihenfolge der Pseudoklassen ohne :hover lautet:

 :link,:visited,:focus,:active

mit:

 :link,:visited,:focus,:hover,:active

Siehe http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

Beachten Sie:
Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.

[edit]Tipp-Ex[/edit]​

 

[fredolin]

Hi SpiceLab,

erstmal Danke für deine schnelle Antwort. Aber leider hilft das auch nicht. Ich habe dies schon während ich hier da gepostet hab, ausprobiert. sorry

Ich hoffe es kann mir noch einer Hilfe geben oder einen Denkanstoß..

Gruß fredolin

 

[SpiceLab]

Das kommt aber genau so in der Praxis zum Einsatz, und funktioniert demnach einwandfrei.

In einer Testseite konnte ich mich eben auch mit deinem fehlerkorrigierten CSS davon überzeugen!

Kannst du also bitte deinen erfolglosen Versuch zeigen? Gerne auch auf http://jsfiddle.net

[edit]Tipp-Ex[/edit]​

 

[djheke]

Vielleicht hilft dir das hier weiter, Punkt 8.
http://www.gipspferd.de/css/anleitung/a20/a20.php

 

[SpiceLab]

Vielleicht hilft dir das hier weiter, Punkt 8.

Einziger Unterschied zu meinem Vorschlag (Nachfahren-Selektor => ul.topnav li:hover a) ist in deinem CSS der angewandte Kind-Selektor (ul#navi li:hover > a). Für die Funktionalität macht es aber keinen Unterschied, welcher der beiden Selektoren zum Einsatz kommt.

 

[djheke]

War ja nur für fredolin als Beispiel gedacht. Nicht um Unterschiede zu benennen.

 

[SpiceLab]

War ja nur für fredolin als Beispiel gedacht. Nicht um Unterschiede zu benennen.

Dass das Beispiel nicht mir gewidmet war, dürfte klar sein

Nur ist es gleichgültig, welcher der beiden angesprochenen Selektor-Typen (Nachfahren-Selektor oder Kind-Selektor) verwendet wird. Beide führen hier zum gleichen Ergebnis.

[edit]Tipp-Ex[/edit]​

 

[fredolin]

Hi all,
so das Menüproblem hab ich geschaft.. Ich danke euch allen für eure hilfe..Danke

 

[SpiceLab]

Woran hat's bei dir gelegen?