Thema: Horizontales CSS Menü - Aktiv Button Fehler

Hallo,

ich hab folgendes Problem. Ich habe mit Hilfe eines Tutorials ein horizontales CSS Menü für Joomla gebastelt, doch leider wurden hier nur die normalen Buttons mit Hovereffekt beschrieben.
Jetzt will ich aber auch gerne den aktiven Button kennzeichnen, also das #active_menu.

So sieht der CSS-Code aus:

Code:

/*Start Navigation Top*/
.modulehmenu{
float:left;
width:100%;
font-size:0.9em;
line-height:1.9em;
}
#mainlevelh {
margin:0;
padding:10px;
list-style:none
}
#mainlevelh li{
float:left;
background:url(../images/navitopleft.gif) no-repeat left top;
margin:0;
padding:0 0 0 12px;
}
#mainlevelh li a{
float:left;
display:block;
width:auto;
background:url(../images/navitopright.gif) no-repeat right top;
padding:26px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#000;
text-align:center;
}
#mainlevelh a{
float:none
}
#mainlevelh a:hover{
color:#333
}
#mainlevelh li:hover,#mainlevelh li:hover a{
background-position:0% -45px;
color:#333
}
#mainlevelh li:hover a{
background-position:100% -45px;
border:none;
}
#mainlevelh li #active_menuh{
background-position:0% -90px;
color:#FFFFFF
}
#mainlevelh li a#active_menuh{
background-position:100% -90px;
border:none;
}
#mainlevelh li a#active_menuh{
text-decoration:underline;
}

/*End Navigation Top*/

HTML-Code:

Code:

<div id="navigationtop"><?php mosLoadModules ( 'navitopreg',-3 ); ?></div>

Weitere Einstellungen:

Menu Class Suffix: h
Module Class Suffix: hmenu
Menu Style: Flat List

Hier die zwei Grafiken:




Den aktiv Button hab ich noch als dritte Grafik jeweils angefügt.

Doch jetzt tritt das Problem auf, das bei dem aktiven Button die navitopleft Grafik nicht angezeigt wird.
Bei dem Hover-Effekt klappts. Wahrscheinlich hab ich was bei dem active_menuh Code was vertauscht/falsch angeben. Ich komm einfach nicht drauf...

Beim Aktiv-Button soll der ganze Button heller und silber sein auch die linke Seite mit Ecke.



Ich wär euch echt dankbar wenn ihr mir den eingebauten Fehler nennen könntet.
Ich will aber gerne nur die zwei Grafiken verwenden, das es zu keinen extra Nachladen kommt.

Wahrscheinlich ist es nur ein einfacher Schreibfehler.... ich komm nicht drauf.

Und zweitens sollte der Menü-Text bei Hover und Acitve Button etwas nach oben geschoben werden, wie kann ich das ermöglichen?

Danke im Vorraus

Gruß
Mike

#mainlevelh li #active_menuh{
background-position:0% -90px;
color:#FFFFFF
}
#mainlevelh li a#active_menuh{
background-position:100% -90px;
border:none;
}

Beim li#active steht Background-position auf 0% beim anderen auf 100%... vielleicht liegts daran ???

Mich hat schon gewundert wie du das hinbekommen hast... mit der Pseudoklasse li:hover gehts ja noch, aber der active status wird durch eine vom System generierte id #active_menuh markiert... diese gilt aber nur für das a-Element. Wie du das auf das li-Element anwenden kannst weiß ich nicht, ich wage sogar zu behaupten dass der Effekt den du willst in deinem Konstrukt nicht möglich ist...

wie oft denn noch
http://www.joomlaportal.de/joomla-te...ml#post1166368