Hi an alle, ich habe das Menü von just2b nachgebaut. Funktioniert alles super! Allerdings habe ich ein Problem mit Design! (Seite leider nicht online)
Ich möchte, das Aussehen des oberen Menüs verändern (bzw. dass das obere Menü aktiv bleibt), sobald man auf das Submenü geht. Kann ich das mit der CSS lösen? Wenn ja, dann wie?
Hier ist meine CSS:
#nav {
margin: 14px auto;
margin-top: 0px;
margin-bottom: 0px;
font-family: verdana, sans-serif;
width: 996px;
height: 37px;
position: relative;
color: #3D5054;
font-size: 11pt;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: bolder;
text-decoration: none;
list-style-type: none;
z-index: 100;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav a {
display: block;
text-decoration: none;
width: 121px;
height: 37px;
border-width: 0px 0px 0 0;
background: transparent;
background-image: url(../img/mnu_reiter1_no.gif);
padding-left: 0px;
color: #3D5054;
font-size: 11pt;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: bolder;
text-decoration: none;
}
#nav li {
float: left;
position: relative;
height: 25px;
line-height: 37px;
vertical-align: middle;
}
#nav li.noact {
float: left;
position: relative;
height: 37px;
background-image: url(../img/mnu_reiter1_no.gif);
background-repeat: no-repeat;
color: #3D5054;
font-size: 11pt;
line-height: 37px;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: bolder;
text-decoration: none;
text-indent:
vertical-align: text-bottom;
}
#nav li ul {
display: block;
position: absolute;
left: -999em;
height: 25px;
width: 121px;
font-weight: normal;
margin: 0;
}
#nav li li {
width: 121px;
}
#nav li:hover a,
#nav li a:hover {
background: transparent;
background-image: url(../img/mnu_reiter1_act.gif);
background-repeat: no-repeat;
height: 37px;
color: #99172D;
font-size: 11pt;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: bolder;
text-decoration: none;
}
#nav li:hover a.nodrop,
#nav li a:hover.nodrop {
background: transparent;
background-image: url(../img/mnu_reiter1_no.gif);
background-repeat: no-repeat;
height: 37px;
color: #99172D;
font-size: 11pt;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: bolder;
text-decoration: none;
}
#nav li:hover ul,
#nav li.sfhover ul {
position: absolute;
top: 37px;
margin-top: 0px;
width: 121px;
left: 0px;
}
#nav li ul a {
color: #3D5054;
font-size: 9pt;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: normal;
text-decoration: none;
letter-spacing: 0px;
padding-left: 5px;
text-align: center;
background: url(../img/mnu_reiter2_bg.gif) repeat-y;
height: 25px;
line-height: 25px;
padding: 0px 0px;
width: 121px;
}
#nav li ul li:hover a,
#nav li ul li a:hover {
color: #99172D;
font-size: 9pt;
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight: normal;
text-decoration: none;
letter-spacing: 0px;
padding-left: 5px;
text-align: center;
background: url(../img/mnu_reiter2_bg.gif) repeat-y;
height: 25px;
line-height: 25px;
padding: 0px 0px;
width: 121px;
}
Danke für die Hilfe!
Gruß
