Nav-Dropdown: Fix doppeltes class-Attribut, visibility statt display:none

This commit is contained in:
David Kertzscher 2026-06-17 13:20:17 +00:00
parent fd45e3d152
commit 85bf7ce69f
7 changed files with 26 additions and 11 deletions

View file

@ -551,7 +551,15 @@ nav {
}
.nav-dropdown-menu {
display: none;
/* Versteckt nur beim Hover sichtbar */
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
/* Layout */
display: flex;
flex-direction: column;
position: absolute;
top: calc(100% + 8px);
left: 0;
@ -560,7 +568,6 @@ nav {
border: 2px solid rgba(255,105,180,0.35);
border-radius: 14px;
padding: 0.4rem;
flex-direction: column;
gap: 0.1rem;
box-shadow: 0 8px 28px rgba(255,20,147,0.15);
z-index: 200;
@ -569,7 +576,10 @@ nav {
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
display: flex;
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav-dropdown-menu a {
@ -2786,7 +2796,7 @@ body.dark .nav-toggle span {
color: #ff1493;
padding: 0.75rem 1rem;
border-radius: 10px;
pointer-events: none; /* Im Hamburger nicht klickbar immer offen */
pointer-events: none;
}
nav#main-nav .nav-dropdown-trigger::after {
@ -2794,7 +2804,12 @@ body.dark .nav-toggle span {
}
nav#main-nav .nav-dropdown-menu {
display: flex;
/* Im Hamburger immer sichtbar */
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
/* Layout */
position: static;
background: rgba(255,20,147,0.04);
border: 1px solid rgba(255,105,180,0.2);

View file

@ -30,7 +30,7 @@
</button>
<nav id="main-nav">
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html" class="active">Projekt</a>

View file

@ -30,7 +30,7 @@
</button>
<nav id="main-nav">
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>

View file

@ -30,7 +30,7 @@
</button>
<nav id="main-nav">
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>

View file

@ -30,7 +30,7 @@
</button>
<nav id="main-nav">
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>

View file

@ -30,7 +30,7 @@
</button>
<nav id="main-nav">
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>

View file

@ -30,7 +30,7 @@
</button>
<nav id="main-nav">
<div class="nav-dropdown">
<a href="index.html" class="active" class="nav-dropdown-trigger">Start ▾</a>
<a href="index.html" class="active nav-dropdown-trigger">Start ▾</a>
<div class="nav-dropdown-menu">
<a href="ueber_uns.html" class="active">Über uns</a>
<a href="eis_projekt.html">Projekt</a>