CSS :hover wirkt sich auf anders Element aus

[PC FREAKY]

Hallo,

Wie ist es möglich, dass wenn ich auf einen Punkt / Unterpunkt von meinem Menü draufgehe, das komplette angewaehlte Menü sich auch veraendert?

Hier mal mein Beispiel:

Wenn ich auf Infos, testerle oder History gehe, dann sollen alle drei weiß werden, nicht nur das, wo ich gerade drauf bin...
Hier mal mein CSS Code

body {font-family:Helvetica,Arial,sans-serif;font-size:12px;}

/* CORE */

.menutop,.menutop * {margin:0;padding:0;}
.menutop {float:left;position:relative;padding-bottom:2px;}
.menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
.menutop li a.item {cursor:pointer;}
.menutop li span.item {cursor:default;outline:none;}
.menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
.menutop li li .item, 
.menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
.menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
.menutop li li {position:relative;float:none;}

/* Drop Downs */
.menutop ul {width:300px;position:relative;margin-right:30px}

/* Level 1 */
.menutop li .item {text-decoration:none;display:block;padding:0 15px;background:#000;border-color:#000;border-style:solid;border-width:1px;color:#ffffff;text-decoration:none;margin-right:30px;width:80px;}

.level1 .f-mainparent-itemfocus .item {background:#000 100% 100% no-repeat;border-color:#000;border-style:solid;border-width:1px;}

.menutop li:hover > .item {background-color:#000;border-top:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000}
/* Level 2 */
.menutop .level2 li > .item {background:#000;border-color:#000;border-style:solid;border-width:1px;}

.menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;color:#333;}

/* regular hover */
.menutop li:hover .item:hover, .menutop li.active .item:hover  {background-color:#fff;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;color:#000}

/* seperator hover */
.menutop span.item:hover,
.menutop li:hover span.item:hover {background-color:#666;border-top:1px solid #777;border-left:1px solid #777;border-right:1px solid #555;border-bottom:1px solid #555;color:#fff}

/* Root Items */
.menutop li.root {width:auto;float:left;height:30px;} 
.menutop li.root > .item {float:left;width: 80px;height:30px;line-height:30px;font-size:1.5em;}
.menutop li.root:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;color:#000000;}

/* Active Items */
.menutop li.active > .item {background-color:#000;border-color:#000 #000 #000 #000;color:#fff;}
.menutop li.active > .daddy {background-image:url(../images/active-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}


/* No JS */
.menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:170px;top:0;}
.menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
.menutop li:hover ul, 
.menutop li.sfHover ul {left: 0;top:32px;}
.menutop ul {width:175px;}
.menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;top: 0;}

.menutop .level2 li {position:relative;float:left;width:100%;}

/* Fusion Pill */
.fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
.fusion-pill-r {margin-left: -12px;height: 35px;}

/* Fusion JS */
.fusion-js-container {display:block;height:0;left:0;overflow:visible;position:absolute;top:0;z-index:600000!important;background:transparent !important;}
.fusion-js-subs {display:none;margin:0 0 0 -2px;overflow:hidden;padding:0 2px;position:absolute;}

 

[UltiSalamander]

Du musst ein :hover des Umgebenden/Übergeordneten Elements definieren.

 

[Znrl]

Ohne HTML dazu muss man raten wo bspw. dein span ist etc.
Auch die Reihenfolge ist wichtig, wenn bei so viel CSS irgendwas mehrfach angesprochen wird zählt das, was zuletzt kam. Oft überschreibt man sich bspw. ne Farbe weiter unten und merkt das nicht.

Firefox Addon: "Firebug" ziemlich praktisch die "element untersuch funktion" da siehst du alles was im CSS für das Element gilt und überschriebene Sachen durchgestrichen.

Wenn du das HTML dazu lieferst kann man das auch direkt testen.