Hallo Freunde,
ich habe einfaches Menü.
http://www.mbphoto.ch/contact-me/rechtliches/
Nun sollten die einzelnen Items in 3 verschiedenen Farben beim anklicken, also wenn aktiv, bleiben.
Beim selector :hover geht es.
.topmenu .dropdown .menu-item-667 a:hover{color:red;}
.topmenu .dropdown .menu-item-831 a:hover{color:#45D820;}
.topmenu .dropdown .menu-item-710 a:hover{color:#17CEEA;}
Aber wenn ich will, dass das angeklickte Menü die zugewiesene Farbe behält, funktioniert es nicht.
also ich denke normalerweise wird eine zusätzliche Klasse definiert für das Menü zB.
.act1 a:active{
color: red;
}
.act2 a:active{
color: #45D820;
}
.act3 a:active{
color: #17CEEA;
}
Aber wie verbinde ich das dann mit den einzelnen menü items?
.topmenu .dropdown .menu-item-667 a:active{color:red;}
.topmenu .dropdown .menu-item-831 a:active{color:#45D820;}
.topmenu .dropdown .menu-item-710 a:active{color:#17CEEA;}
Ich weiss nicht ob man einfach hier so auf Hilfe hoffen darf, oder muss man erst Posts schreiben. Ich versuchs aber einfach Mal.
Entschuldigung wenn ich was falsch gemacht habe. DAnke! falls jemand Rat weiss.
Hir das ganze CSS für das Top Menü.
HTML
/* topmenu */
top:34px; right:190px;} .topmenu .dropdown { font-family: meineschrift, Verdana; font-size:14px; text-transform:uppercase; line-height:1.1em; z-index:1300; margin:0; padding:0; background: #888888;} .topmenu .dropdown li { display:block; float:left; margin:0; position:relative; list-style:none; margin:0 10px;} .topmenu .dropdown li a { display:block; color:#d1d3d4; height:20px; text-decoration:none;} .topmenu .dropdown li a span { display:block} .topmenu .dropdown .menu-item-667 a:active{ color:red;} .topmenu .dropdown .menu-item-831 a:active{ color:#45D820;} .topmenu .dropdown .menu-item-710 a:active{ color:#17CEEA;} .topmenu .dropdown .menu-item-667 a:hover{ color:red;} .topmenu .dropdown .menu-item-831 a:hover{ color:#45D820;} .topmenu .dropdown .menu-item-710 a:hover{ color:#17CEEA;} .topmenu .dropdown .current-menu-ancestor-item ul li a, .topmenu .dropdown .current-menu-ancestor .current-menu-item li a, .topmenu .dropdown .menu-item-home ul li a, .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor li a, .topmenu .dropdown .current-menu-ancestor li .current-menu-item li a, .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor li a { color:#d1d3d4;} .topmenu .dropdown.menu-item-831 li ul li a:focus{ color:#45D820;} .topmenu .dropdown .current-menu-ancestor ul li a:hover, .topmenu .dropdown .current-menu-ancestor .current-menu-item a, .topmenu .dropdown .current-menu-ancestor li .current-menu-item-667 a, .topmenu .dropdown li .current-menu-item-667 a:focus{ color:red;}.topmenu .dropdown.current-menu-item-588 a:active{ color:#45D820;}.topmenu .dropdown.current-menu-item-710 a:active{ color:#17CEEA;} .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor a:focus{ color:;} .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor :focus{ color:;} .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor li :focus{ color:;} .topmenu .dropdown .current-menu-ancestor .current-menu-ancestor .current-menu-ancestor .current-menu-item a{ color:#d1d3d4;} .topmenu .dropdown li ul { display:none; position: absolute; top: 20px; left:-15px; z-index: 1308; width: 186px; padding:22px 0 0 0; margin:0; font-size:13px;} .topmenu .dropdown li ul li ul { display:none; position: absolute; top:-7px; width: 175px; left:-175px !important; z-index: 1308; padding:0; font-size:12px;} .topmenu .dropdown li ul li { display:block; background:url(images/dropdown_sprite2.png) 0 0 repeat-y; width: 186px; margin:0; height:auto; clear:both; position:relative; line-height:1.3em} .topmenu .dropdown li ul li ul li { width: 175px;} .topmenu .dropdown li ul li ul li { background:url(images/dropdown_sprite2.png) -186px 0 repeat-y;} .topmenu .dropdown li ul li.first { background:url(images/dropdown_sprite.png) 0 top no-repeat; padding-top:15px} .topmenu .dropdown li ul li ul li.first { background:url(images/dropdown_sprite.png) -372px top no-repeat; padding-top:8px} .topmenu .dropdown li ul li.last { background:url(images/dropdown_sprite.png) -186px bottom no-repeat; padding:0 0 8px 0;} .topmenu .dropdown li ul li ul li.last { background:url(images/dropdown_sprite.png) -547px bottom no-repeat;} .topmenu .dropdown li ul li a{ background:url(images/dropdown_sprite2.png) -361px bottom no-repeat; display:block; color:#d1d3d4; text-shadow:0 1px 1px #000; height: auto; padding:10px 23px 10px 23px;} .topmenu .dropdown li ul li ul li a { background:url(images/dropdown_sprite2.png) -547px bottom no-repeat; padding:10px 23px 10px 19px !important;} .topmenu .dropdown li ul li.last a, .topmenu .dropdown li ul li ul li.last a { background:none} .topmenu .dropdown li a:hover span { cursor:pointer} .topmenu .dropdown .parent li a span, .topmenu .dropdown .parent li a:hover span { background:none} .topmenu .dropdown li ul li.parent ul li span, .topmenu .dropdown li ul li.parent ul a:hover span { background:none; padding-right:0px} .topmenu .dropdown li ul li.parent span, .topmenu .dropdown li ul li.parent ul li.parent a span { background:url(images/dropdown_1_arrow.png) 130px 5px no-repeat; padding-right:10px} .topmenu .dropdown li ul li.parent ul li.parent a span { background-position:115px 5px;} .topmenu .dropdown li ul li.parent a:hover span { background:url(images/dropdown_1_arrow.png) 131px 5px no-repeat;} .topmenu .dropdown li:hover ul li ul, .topmenu .dropdown li:hover ul li:hover ul ul { display:none;} .topmenu .dropdown li:hover ul, .topmenu .dropdown li:hover ul li:hover ul, .topmenu .dropdown li:hover ul li:hover ul li:hover ul { display:block}