Hi,
wahrscheinlich ein relativ simples zu lösendes Problem, aber ich komme einfach nicht darauf:
Meiner Navigation habe ich eine class mitgegeben. Diese Div class hat einen Hintergrund der sich bei Hover verändert.
Die dortigen hinterlegten "Submenus" sollen schlicht horizontal sein und keinen Hintergrund haben. Leider vererbt sich der Hintergrund aus der ersten CLass oben und es funktioniert nicht. Wie also umgehe ich das Problem.
HIer mal mein Lösungsansatz:
CSS
#pixopoint_menu1 .page-item-4 {width:123px;height:41px;color:#ffffff;background: url(images/navi-about-off.png) no-repeat;float:left;display:block;margin-right:10px;margin-left:14px;outline-style: none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:11px 0 0 0;text-align:center;}
#pixopoint_menu1 .page-item-8 {width:123px;height:41px;color:#ffffff;background: url(images/navi-about-off.png) no-repeat;float:left;display:block;margin-right:10px;margin-left:14px;outline-style: none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:11px 0 0 0;text-align:center;}
#pixopoint_menu1 .page-item-10 {width:123px;height:41px;color:#ffffff;background: url(images/navi-about-off.png) no-repeat;float:left;display:block;margin-right:10px;margin-left:14px;outline-style: none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:11px 0 0 0;text-align:center;}
#pixopoint_menu1 .page-item-11 {width:123px;height:41px;color:#ffffff;background: url(images/navi-about-off.png) no-repeat;float:left;display:block;margin-right:10px;margin-left:14px;outline-style: none;font-size:0.75em;font-style:Tahoma;font-weight:normal;text-decoration:none;text-transform:uppercase;padding:11px 0 0 0;text-align:center;}
#pixopoint_menu1 .page-item-4 haschildren {color:#000;float:left;margin-left:4px;}
#pixopoint_menu1 ul {color:#ffffff;float:left;}
#pixopoint_menu1 li {color:#000;float:left;margin-left:4px;}
#pixopoint_menu1 li:hover,#pixopoint_menu1 li.sfhover {float:left;color:#000;}
#pixopoint_menu1 li a {color:#fff;}
#pixopoint_menu1 li a:hover {color:#ff0000;text-decoration:none;}
#pixopoint_menu1 ul ul {position:absolute;left:-999em;width:720px;}
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {left:auto;color:#000;margin-left:-90px;}
#pixopoint_menu1 ul ul li a {text-transform:normal;font-variant:normal;color:#000;background:none;}
#pixopoint_menu1 ul ul li {float:left;letter-spacing:0px;color:#444444;z-index:20;font-family:helvetica,arial,sans-serif;font-size:11px;font-weight:normal;
font-style:normal;
background:#FFFFFF;
}
#pixopoint_menu1 ul ul li a {line-height:22px;color:#444444;text-decoration:none;background:none !important;}
#pixopoint_menu1 ul ul li:hover a,#pixopoint_menu1 ul ul li.sfhover a {background:none !important;color:#43b1d6;text-decoration:none;}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
color:#444444;
}
#pixopoint_menu1 ul ul li:hover li a:hover,#pixopoint_menu1 ul ul li.sfhover li a:hover {
color:#000000;
}
#pixopoint_menu1 ul ul li:hover,#pixopoint_menu1 ul ul li.sfhover {
color:#000000;
background:none;
}
#pixopoint_menu1 ul ul ul li {
font-size:1em;}
#pixopoint_menu1 ul ul ul, #pixopoint_menu1 ul ul ul ul {
position:absolute;
margin-left:-999em;
top:0;
width:720px;
}
#pixopoint_menu1 li li:hover ul,#pixopoint_menu1 li li.sfhover ul,#pixopoint_menu1 li li li:hover ul,#pixopoint_menu1 li li li.sfhover ul {
margin-left:90px;
}
#pixopoint_menu1 ul ul li:hover li a,#pixopoint_menu1 ul ul li.sfhover li a {
text-decoration:none;
}
#pixopoint_menu1 ul ul li li:hover a,#pixopoint_menu1 ul ul li li.sfhover a {
color:#FFFFFF;
text-decoration:none;
}
#pixopoint_menu1 li.pixo_search:hover {
background:none;
}
#pixopoint_menu1 li.pixo_search form {
margin:0;
padding:0;
}
#pixopoint_menu1 li.pixo_search input {
font-family:tahoma,sans-serif;}
#pixopoint_menu1 li.pixo_search input.pixo_inputsearch {
width:90px;
}
#pixopoint_menu1 li.pixo_right {
float:right;
}
Alles anzeigen