Änderung der Hintergrundfarbe im Dropdown-Menü bei Mouseover im Layout "Top Responsive"

Drcymbal

Liebes Forum,

ich nutze das Layout „Top Responsive“ und frage mich, ob es eine Möglichkeit im Dropdown-Menü gibt, bei Mouseover auch die Hintergrundfarbe zu ändern. Das Layout selber gestattet ja nur eine Konfiguration der Schriftfarbe, Schriftgewicht und Textauszeichnung.

Idealerweise sollte sich die andere Farbe dann auch über die Gesamtbreite des Menüs erstrecken und nicht nur unmittelbar hinter dem Text. Das sähe sicherlich unschön aus.

Vielen Dank für Eure Anregungen und viele Grüße

Tom

Steffen T.

Hallo,

das ist bei diesem Layout leider so nicht möglich.

Sie könnten das nur mit eigenem CSS umsetzen.

Dazu benötigen Sie natürlich entsprechende Kenntnisse.

Siehe auch: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Mario

Wenn ich dich richtig verstanden habe sollte das helfen.

Einstellungen > CSS:

CSS

<style>
#navigation {
padding-left:25px;
transition: background-color 0.2s;
}
#navigation:hover {
background-color: red !important;
}
</style>

Drcymbal

Hallo Mario,

zunächst Mal vielen Dank. Da habe ich mich wohl etwas unklar ausgedrückt. Wenn Du mal unter https://www.preissler-music.com/ guckst. Nach Klick auf "Vermietung" und Hover auf einen Menüeintrag wie "Schlaginstrumente" wird der entsprechende Link mit einer anderen Hintergrundfarbe unterlegt. Das will ich eigentlich erreichen.

Viele Grüße

Tom

Mario

Um helfen zu können bitte genauer ausdrücken.

Geht es um das Hauptmenü, das Untermenü oder beides?
Geht es darum den Jeweiligen Link beim überfahren mit der Maus eine andere Hintergrundfarbe zu vergeben oder oder dem ganzen Menü? Idealerweise sollte sich die andere Farbe dann auch über die Gesamtbreite des Menüs erstrecken und nicht nur unmittelbar hinter dem Text.
Am besten mit einem Screenshot aufzeigen was du erreichen willst wenn der Mauszeiger wo ist.

Drcymbal

Hallo Mario,

um das Folgende geht es. Bei Mouseover im Dropdown-Menü die Hintergrundfarbe zu ändern.

Viele Grüße

Tom

Mario

CSS

<style>
#navigation a {
padding: 12px 30px;                           /* Innenabstände Verweise */
width: 100%;                                  /* volle Breite für die Hintergrundfarbe */
}
#navigation a:hover {
background-color: red;                        /* Hintergrundfarbe Verweise */
}
#navigation > div > ul > li > a:hover {
background-color: transparent !important;     /* Hintergrundfarbe Hauptmenü wieder aus */
}
#navigation ul ul ul {
right: 1px;                                   /* Rutscht die 3.Ebene weiter nach rechts */
top:0px;                                      /* Rutscht die 3.Ebene auf eine Höhe mit der zweiten */
}
#navigation ul ul {
box-shadow: none;                             /* Schatten ausblenden */
padding: 0;                                   /* Innenabstände Untermenü */
}
</style>

Alles anzeigen

Drcymbal

Ein Träumchen! Dir ganz herzlichen Dank!

Änderung der Hintergrundfarbe im Dropdown-Menü bei Mouseover im Layout "Top Responsive"

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?