Hilfe bei CSS-Modifikation Hauptmenü/Dropdownmenü in Top Responsive

Hallo allerseits (insbesondere die CSS-Fachleute unter Euch),

ich würde gern mein bestehendes Menü in Top Responsive etwas modernisieren. Mit einer gesunden Mischung aus gefährlichem Halbwissen und trial and error bin ich schon recht weit gekommen. Ich habe den Entwurf mal auf meinen Testserver geladen:

https://www.percussion-bags.de/index.html

Probleme/Baustellen:

Dadurch, dass ich das Dropdownmenü nach unten verlagert habe, so dass es bündig mit dem Standardbereich beginnt, entsteht zwischen Link im Hauptmenü und dem aufgeklappten Dropdown eine Lücke, in der der Cursor keinen Effekt hat. Anders ausgedrückt: Bewegt der Benutzer seine Maus nicht schnell genug vom Hauptmenü auf das ausgeklappte Dropdownmenü, schließt sich Letzteres wieder. Gegenwärtig habe ich „transition: ease-out 800ms“ als Lösung eingebaut. Das ist optisch natürlich ein netter Effekt, der auch gerne bestehen bleiben darf, vielleicht gibt es aber für das angesprochene Problem auch eine einfachere Lösung. Spielerei mit padding/margin war bislang nicht zielführend.

Des Weiteren suche ich noch eine Möglichkeit, den Unterstrich bei Hover im Hauptmenü (derzeit statisch bei 120 Px zu zentrieren. Im Original-Layout steht hier „calc(100% - 30px)“. Hier verstehe ich das Prinzip noch nicht so richtig.

Wie immer vielen Dank für Eure Hilfestellungen. Für Hinweise zu etwaigen Schnitzern im CSS bin ich natürlich auch dankbar.

Der Einfachheit halber hier auch der gesamte CSS-Stil:

<style>

media (min-width: 1024px){

#navigation div>ul>li>a:hover {

background-color: transparent !important; /* Ausschalten Hintergrundfarbe Hauptmenü */

}

#navigation a

{

padding: 15px 40px 15px 40px; /* Innenabstände Dropdown im UZS */

}

#navigation ul ul a:hover /* Dropdown Hover */

{

background-color: #FFFFFF; /* Hintergrundfarbe */

width: 100%; /* Breite Hintergrundfarbe */

}

#navigation ul ul /* Dropdown */

{

border-top: 3px solid #399CC6; /* Rahmenstärke Ausführung Farbe */

margin-top: 25px; /* Dropdown Abstand zum Hauptmenü */

min-width: 320px; /* Dropdown Breite */

transition: ease-out 800ms; /* Verzögerung Dropdown */

}

#navigation>div>ul>li:hover>a:after /* Hauptmenü Hovereffekt Unterstreichung */

{

top: 68px; /* Abstand Menüpunkt Unterstrich */

width: 120px; /* Breite Unterstreichung calc(100% - 30px) */

height: 3px; /* Linienbreite Unterstrich */

background: #399CC6; /* Farbe Unterstrich */

}

</style>

Viele Grüße

Tom

Hat denn keiner eine Idee?

Ich gebe zu, dass die Sache vielleicht nicht ganz so trivial ist, wie ich angenommen habe. Dass es aber prinzipiell machbar ist, sieht man unter https://barzakh.org/privacy-policy/ beim Menüpunkt „Our Resources“.

Das „Problem“ mit der Unterstreichung habe ich inzwischen gelöst. Damit man das eigentliche Problem des einklappenden Dropdown-Menüs besser sieht, habe ich „transition“ zwischenzeitlich wieder auf „0“ gesetzt.

Ich freue mich über jeden Hinweis.

Viele Grüße

Tom

Hallo Markus,

ein Träumchen!

Ganz herzlichen Dank und viele Grüße

Tom