ich habe ein Problem mit meinem Menü, da meine CSS-Kenntnisse auf Anfängerniveau sind.
Also ich habe ein Menü mit {NAV_LIST_UL:F,ID,,act_path,active} erstellt.
Jetzt hätte ich gern folgendes:
1.) Wenn eine Rubrik in der Ebene 1 angeklickt wird, soll der aktive Status mit z.B. blauen Hintergrund erscheinen. -> funktioniert über die CSS-Klasse ".nlu_navi1 ul li.sub_ul a".
2.) Wenn man dann eine Rubrik aus dem Untermenü anklickt, soll sich die Hintergrundfarbe der Ebene 1 erneut z.B. in rot ändern.
Ich habe den halben Tag versucht das Menü das zu realisieren - ohne Erfolg
. Jetzt hoffe ich, dass mir von Euch jemand einen Tipp geben kann. Schon mal Danke.
poitou
Momentan sieht mein CSS so aus:
/* LEVEL X */
/* einfacher Link <a>*/
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link,
.nlu_navi1 ul li a:visited,
.nlu_navi1 ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #9B9A9E; /* Textfarbe */
/* Hintergrundfarbe; URL der Grafik ; Grafik einrücken z.B. 10px */
background: #EAEAEA;
/* Den "white-space" Fehler im IE7 vermeiden */
\width: 179px; /* IE5x Opera <= 5 */
widt\h: 157px; /* = (Width of Menu Items) - (padding-right + left) */
/* Untere Linie wenn gewünscht */
border: 0;
border-bottom: 2px solid #CCCCCC; /* horiz. line between */
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
/* aktiver Link <a> */
.nlu_navi1 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul li.active a:active {
color: #FFFFFF; /* Textfarbe */
font-weight: bold; /* Fett wenn gewünscht */
background: #3D5DA8; /* Hintergrund für den aktiven Status */
}
/* state for the active point if there is a sub_level */
.nlu_navi1 ul li.sub_ul a,
.nlu_navi1 ul li.sub_ul a:link,
.nlu_navi1 ul li.sub_ul a:visited,
.nlu_navi1 ul li.sub_ul a:active {
color: #FFFFFF;
font-weight: bold;
background: #3D5DA8 url(../../...........) 10px 1px no-repeat;
}
/* Maus über Link <a> */
.nlu_navi1 ul li a:hover {
color: #FFFFFF;
/* text-decoration: underline; */
background: #9B9A9E url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
.nlu_navi1 ul li.active a:hover {
color: #FFFFFF;
/* text-decoration: underline; */
background: #3D5DA8 url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
/* LEVEL X+1 */
.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link,
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active,
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link,
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul li.sub_ul a:active {
display: block;
text-decoration: none;
text-transform: none;
font-weight: normal;
color: #3D5DA8;
background: #FFFFFF url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
\width: 179px; /* IE5x Opera <= 5 */
widt\h: 141px; /* = (Width of Menu Items) - (padding-right + left) */
border: 0;
border-bottom: 1px solid #CCCCCC; /* IE6 Bug */
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 28px;
}
.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
color: #FFFFFF;
font-weight: normal;
background: #3D5DA8 url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
border-bottom: 2px solid #CCCCCC; /* horiz. line between */
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
padding-left: 26px;
}
.nlu_navi1 ul ul li a:hover,
.nlu_navi1 ul ul li.sub_no a:hover,
.nlu_navi1 ul ul li.sub_ul a:hover {
color: #3D5DA8;
/* text-decoration: underline; */
background: #FFFFFF url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li.active a:hover {
color: #FFFFFF;
/* text-decoration: underline; */
background: #3D5DA8 url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
border-bottom: 2px solid #CCCCCC; /* horiz. line between */
border-top: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
padding-left: 26px;
}