Witam,

Mam następujący problem przy menu CSS, byłbym bardzo wdzięczny za pomoc

W CSS mam zaprojektowany styl menu. Menu ma 4 pozycje, a każda z nich ma na drugim poziomie jeszcze po 3 pozycje. Drugi poziom wyskakuje dopiero, gdy klikniemy w odpowiedni element poziomu pierwszego.

Chciałbym, żeby aktywna pozycja menu podświetlała się na zielono. Udało mi się to zrobić za pomocą stylów, ale mam wciąż jeden problem. Gdy klikam w pozycję na drugim poziome menu to podświetla mi się tylko ta pozycja - to prawidłowo. Niestety gdy klikam na pozycję na pierwszym poziomie menu, to podświetlają mi się zarówno wybrana pozycja, jak również wszystkie pozycje stojące pod tą poprzednią.

Kod CSS całej sekcji zamieszczam ponizej, aktywna sekcja wykorzystuje parametr #current. Byłbym bardzo wdzięczny za pomoc


/*-----------------content----*/
.module_menu div{color:#fff; font-size:12px;}
.module_menu ul {list-style:none; margin:0 0 0 0px !important;}
.module_menu li { display:block; line-height:14px !important; margin:0 !important; background:url(../images/list_marker.gif) no-repeat 0 10px; padding-left:23px; line-height:25px; list-style:none}
.module_menu li ul li{ display:block; line-height:14px !important; margin:0 !important; background:url(../images/list_marker.gif) no-repeat 0 10px; padding-left:23px; line-height:25px; list-style:none }
.module_menu li ul li a{ }
.module_menu li a {
padding:0 0px 0 0 !important;
display:block;
line-height:25px !important;
text-decoration:none !important;
zoom:1;
position:relative;
text-transform:normal;
background:none !important
}
.module_menu li a span { font-size:15px; font-weight:normal; color:#404040; background:none !important;text-decoration:none}
.module_menu li#current a span { color:#8dc420; font-weight:500;}


.module_menu li a:hover span {
text-transform:none !important;
text-decoration:none !important;
color:#8dc420;



}
/**/
.content .module ul{ list-style:none; margin:0;}
.container ul{ list-style:none; margin:0;}
.container ul li, .content .module ul li{ line-height:16px; padding:0 0 7px 12px; background:url(../images/list_marker1.gif) 0 6px no-repeat; }
.container ul li a, .content ul li a:hover, .content .module ul li a, .content .module ul li a:hover{ color:#8dc420; line-height:16px; font-weight:normal; font-size:14px;}
.content ul li a:hover, .content .module ul li a:hover{ color:#8dc420;}
.container ul li p{ line-height:14px; padding:0;}
.container ul li span{ color:#8dc420 ;}

Po pierwsze owiń ten kod w sekcję css albo chociaż "code"... po drugie wydaje mi się wystarczy:

[CSS] pobierz, plaintext 
.module_menu li a:hover > span { /* tutaj dać przymus tylko dla spana bezpośrednio wewnątrz A - ale nie wiem jak wygląda HTML - który nawiasem mówiąc mógłbyś umieścic... */
text-transform:none !important;
text-decoration:none !important;
color:#8dc420;
 
 
 
}
[CSS] pobierz, plaintext 

Nie jestem pewien ale czy nie wystarczy zdefiniować zachowania a:hover i a:active dla całej klasy?

[CSS] pobierz, plaintext 
#nazwa_diva a:active {
color: #;
background: (o wiele ciemniejszy odcień?);
}
 
#nazwa_diva a:hover {
color: #;
background: (ciemniejszy odcień?);
}
[CSS] pobierz, plaintext 

Oczywiście mogę się mylić bo jeszcze nie bawiłem się rozwijalnymi menu

Dzięki wielkie za pomoc, odpowiedź była prostsza, niż się spodziewałem, wystarczyło dostawić znaczek ">", czyli odpowiedni wiesz wygląda tak:

[CSS] pobierz, plaintext 
.module_menu li#current > a span { color:#8dc420; font-weight:500; }
[CSS] pobierz, plaintext