Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown menu“

lyzarr

Noch nicht viel geschrieben

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:
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
 

Momo22m

Pixxel-Design / Lehrling

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

hast du es nach den tut gemacht



da zeigt er wie man das genau das macht was du suchst
 

lyzarr

Noch nicht viel geschrieben

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

Danke für Deine Antwort - aber nein, ich habe es nicht nach diesem tut gemacht. Ich habe das Video soeben heruntergeladen und angesehen, mit meinem bisherigen Wissen läßt sich dies jedoch nicht ohne Weiteres auf meine Variante (mit bereits getätigten Formatierungen) anwenden.

Wenn ich die im Video gezeigte Zeile
div#menu2 ul li:hover > a{background:#777777;}
(leicht angepaßt) bei mir einbinde, sind alle dropdown menus permanent offen.

Ich bitte um individuelle Hilfe in meinem speziellen Fall (siehe code im start-posting)

Danke und Gruß, Lyzarr
 

fexx

Aktives Mitglied

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

dein problem liegt darin, dass du den :hover state auf die links legst:

a:hover { background: xx; }

da du aber nur den <li> bereich noch hoverst musst du auch den state darauf legen.

li:hover a { background: xx; }

so nachdem du das aber schon mal versucht hast, liegt dann der fehler an anderer stelle. fügs doch bitte mal ein und lade den test nochmal hoch :)
 

lyzarr

Noch nicht viel geschrieben

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

Danke fexx.

Ich habe die Zeile nochmals eingefügt, aber diesmal VOR den bereits vorhandenen Verhaltensregeln für die Listen-Elemente - und *zack* es funktioniert !

Zuvor hatte ich es an verschiedenen Stellen innerhalb des blocks gesetzt, wie auch im Video-tut zu sehen, und da kam es zu dem Fehler.

Test


Vielen Dank !


Lyzarr
 

fexx

Aktives Mitglied

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

wunderbar, wenns funktioniert hat :)
 

lyzarr

Noch nicht viel geschrieben

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

Hallo nochmal... :)

Ich habe doch noch ein kleines Problem welches sich aus der Änderung ergeben hat.
Durch das Einbringen der neuen Zeile haben jetzt auch die Unterpunkte im drop-down beim mouse-over den gleichen grauen block. Beim vorherigen Test ist mir dies nicht aufgefallen, da es der gleiche Ton ist wie im Hintergrund, aber als ich jetzt nach der Problemlösung den gewünschten Hintergrund-fade eingebaut habe wurde es sichtbar.

Test

Ich möchte gerne, daß die Unterpunkte nur andersfarbig erscheinen, der graue block soll da nicht sein.
Kann das in der einen Zeile genauer spezifiziert werden, daß es wirklich NUR die Hauptpunkte betrifft ?!

Nochmals der relevante Block im CSS:

Code:
div#menu2 ul li:hover > a{background:#777777;}
 
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;}

Sorry, daß mir das nicht vorher aufgefallen ist...

Lyzarr
 

fexx

Aktives Mitglied

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

li:hover ul li a:hover { background: none; }

sollte funktionieren :) das problem bei einer solchen dropdown navi ist halt immer, dass die unterpunkte die styles ihrer überpunkte übernehmen. und man dadurch für die unterpunkte ziemlich viel wieder deaktivieren muss und so :)
 

lyzarr

Noch nicht viel geschrieben

AW: CSS menu WIE?: mouseover-Effekt des Hauptpunktes auch wenn cursor im dropdown men

Großartig !

Tausend Dank fexx - funktioniert perfekt.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben