Hallo liebe Leute,
ich habe ein CSS-menu anhand eines tutorials erstellt, leider verhält es sich in einem Punkt nicht wie von mir gewünscht.
Wenn man über die Hauptpunkte geht, so ändert sich deren Hintergrundfarbe zu grau. Sobald man in den dropdown-Bereich kommt (gleicher grauer Hintergrund), so wechselt der entsprechende Hauptpunkt wieder zur standard-Hintergrundfarbe. Ich möchte allerdings erreichen, daß er weiterhin grau bleibt, damit der entsprechende Punkt optisch eine Einheit mit dem dropdown menu bildet.
Testvariante: Test
Könnt Ihr mir bitte sagen was genau ich an meinem "code" ändern muß, damit es funktioniert ?!
der relevante html-Teil:
der entsprechende Teil in der css-Datei:
Vielen Dank schonmal vorneweg für Eure Mühe,
Lyzarr
ich habe ein CSS-menu anhand eines tutorials erstellt, leider verhält es sich in einem Punkt nicht wie von mir gewünscht.
Wenn man über die Hauptpunkte geht, so ändert sich deren Hintergrundfarbe zu grau. Sobald man in den dropdown-Bereich kommt (gleicher grauer Hintergrund), so wechselt der entsprechende Hauptpunkt wieder zur standard-Hintergrundfarbe. Ich möchte allerdings erreichen, daß er weiterhin grau bleibt, damit der entsprechende Punkt optisch eine Einheit mit dem dropdown menu bildet.
Testvariante: Test
Könnt Ihr mir bitte sagen was genau ich an meinem "code" ändern muß, damit es funktioniert ?!
der relevante html-Teil:
HTML:
<ul>
<li><a class="haupt" href="#">Punkt 1</a>
<ul>
<li><a href="#">Punkt 1 A</a></li>
<li><a href="#">Punkt 1 B</a></li>
<li><a href="#">Punkt 1 C</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="haupt" href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2 A</a></li>
<li><a href="#">Punkt 2 B</a></li>
<li><a href="#">Punkt 2 C</a></li>
<li><a href="#">Punkt 2 D</a></li>
<li><a href="#">Punkt 2 E</a></li>
</ul>
</li>
</ul>
<ul>
<li><a class="haupt" href="referenzen.html">Punkt 3</a>
</li>
</ul>
<ul>
<li><a class="haupt" href="galerie.html">Punkt 4</a>
</li>
</ul>
<ul>
<li><a class="haupt" href="partner.html">Punkt 5</a>
</li>
</ul>der entsprechende Teil in der css-Datei:
Code:
#menu2 a.haupt {
padding: 3px 14px 4px 6px;
border-width: 0px;
border-style: solid;
border-bottom: none;
color:#FFF;
text-transform: uppercase;
font: bold 11px/12px arial, helvetica, sans-serif;
}
#menu2 a.haupt:hover
{
/* color: #FFCC33; */
color: #00ff00;
font: bold 11px/12px arial, helvetica, sans-serif;
background: #777777;
}
#menu2 {
width: 525px;
height: 27px;
position: relative;
margin: auto;
z-index: 2;
}
#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu2 a, #menu h2 {
font: 11px/12px arial, helvetica, sans-serif;
display: block;
/* Abstände von Unterpunkt zu Unterpunkt: */
padding: 8px 0px 0px 6px;
border-width: 0px;
border-style: solid;
border-color: #fff #888 #555 #bbb;
margin: 0;
text-align:left;
}
#menu2 h2 {
color: #EEEEEE;
text-transform: uppercase;
}
#menu2 h2:hover
{
color: #96D12C;
background: #000000;
}
#menu2 a {
color: #DDD;
text-decoration: none;
}
#menu2 a:hover {
color: #FFCC33;
}
#menu2 li {position: relative;}
#menu2 ul ul {
/* Abstände des Untermenüs: */
padding: 4px 0px 16px 0px;
position: absolute;
z-index: 500;
background-position: bottom;
background: #777777;
width: 126px;
}
#menu2 ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
{display: none;}
div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;}Vielen Dank schonmal vorneweg für Eure Mühe,
Lyzarr
