Dropdown-Menü erscheint nicht bei Mausklick

Versuch, ein einfaches CSS-Dropdown-Menü zu implementieren.Dropdown-Menü erscheint nicht bei Mausklick

Ich kann das Problem im folgenden HTML/CSS-Code nicht finden, warum diese Implementierung nicht funktioniert.

Wie Sie sehen können klicken Sie einfach auf die Header-Schaltflächen keine Antwort auslösen.

Wenn irgendein CSS-Experte mich darüber informieren könnte, was das Problem sein könnte.

/* Gnav-menu-label:after CSS ---------------------*/

Ist, wo die Probleme liegt glaube ich.

/* START header CSS */ 
 
/* Gnav-active CSS ---------------------*/ 
 

 
.Gnav-active { 
 
    position: relative; 
 
} 
 

 
/* Gnav-wrapper CSS ---------------------*/ 
 

 
#WebsitePrimaryNav.Gnav-wrapper,#WebsitePrimaryNav.Subnav-wrapper { 
 
    -webkit-font-smoothing:antialiased; 
 
    box-sizing:border-box; 
 
    -moz-osx-font-smoothing:grayscale; 
 
} 
 

 
#WebsiteFooterNav.Footernav-wrapper *,#WebsiteFooterNav.Footernav-wrapper :after,#WebsiteFooterNav.Footernav-wrapper :before,#WebsitePrimaryNav.Gnav-wrapper,#WebsitePrimaryNav.Gnav-wrapper *,#WebsitePrimaryNav.Gnav-wrapper :after,#WebsitePrimaryNav.Gnav-wrapper :before,#WebsiteSecondaryNav.Subnav-wrapper *,#WebsiteSecondaryNav.Subnav-wrapper :after,#WebsiteSecondaryNav.Subnav-wrapper :before { 
 
\t box-sizing:border-box; 
 
} 
 

 
#WebsitePrimaryNav.Gnav-wrapper { 
 
    position: relative; 
 
    border-bottom-color: #cad9e3; 
 
    border-bottom-width: 1px !important; 
 
    border-bottom-style: solid; 
 
    height: 80px; 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    z-index: 2; 
 
    background-color: #fff; 
 
    color: #2d2d2d; 
 
    fill: #2d2d2d; 
 
    transition: opacity 1s ease; 
 

 
} 
 

 
.Gnav-active #WebsitePrimaryNav.Gnav-wrapper { 
 
    opacity: 1; 
 
    overflow: visible; 
 
} 
 

 
#WebsitePrimaryNav.Gnav-wrapper, #WebsiteSecondaryNav.Subnav-wrapper { 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
/* Gnav CSS ---------------------*/ 
 

 
body #WebsitePrimaryNav .Gnav{ 
 
    font-family: inherit; 
 
} 
 

 
#WebsitePrimaryNav .Gnav { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 1170px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-shrink: 0; 
 
} 
 

 
/* Gnav-menu-wrapper CSS ---------------------*/ 
 

 
#WebsitePrimaryNav .Gnav-menu-wrapper { 
 
    flex-grow: 1; 
 
    justify-content: center; 
 
    order: 0; 
 
    position: relative; 
 
    display: flex; 
 
    flex-shrink: 0; 
 
} 
 

 
/* Gnav-menu-content CSS ---------------------*/ 
 

 
#WebsitePrimaryNav .Gnav-menu-content { 
 
    top: 100%; 
 
    left: 0; 
 
    background-color: #fff; 
 
    position: static; 
 
    width: auto; 
 
    border-top: none; 
 
    display: flex; 
 
    flex-direction: row; 
 
    box-shadow: none; 
 
} 
 

 
/* Gnav-menu CSS ---------------------*/ 
 

 
#WebsitePrimaryNav.Gnav-wrapper ul{ 
 
    list-style: none; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    max-height: none; 
 
    flex-direction: row; 
 
    overflow-y: visible; 
 
} 
 

 
/* Gnav-menu-item has-submenu CSS ---------------------*/ 
 

 
#WebsitePrimaryNav .Gnav-menu-item { 
 
    padding-top: 0; 
 
    flex-direction: row; 
 
    position: relative; 
 
    display: flex; 
 
    flex-shrink: 0; 
 
} 
 

 

 
#WebsitePrimaryNav .Gnav-menu-item.has-submenu .Gnav-menu-label { 
 
    padding-right: 20px; 
 
} 
 
#WebsitePrimaryNav.Gnav-wrapper a{ 
 
    text-decoration: none; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-label:focus, #WebsitePrimaryNav .Gnav-menu-label:hover { 
 
    background-color: #f4f4f4; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.has-submenu .Gnav-menu-label:after { 
 
    display: block; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.is-open>.Gnav-menu-label { 
 
    background-color: #f4f4f4; 
 
    color: #2d2d2d; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-label:focus{ 
 
    outline-offset: -3px; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-label { 
 
    height: auto; 
 
    font-size: 14px; 
 
    position: relative; 
 
    padding: 0 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    font-weight: 700; 
 
    color: inherit; 
 
    transition: color .1s ease,background-color .1s ease; 
 
} 
 

 
/* Gnav-menu-label:after CSS ---------------------*/ 
 

 
#WebsitePrimaryNav .Gnav-menu-item.is-open>.Gnav-menu-label:after { 
 
    transform: rotate(-180deg); 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.is-open>.Gnav-submenus { 
 
    max-height:none; 
 
    visibility:visible 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.has-submenu .Gnav-menu-label:after, #WebsitePrimaryNav .Gnav-menu-item:before { 
 
    display: none; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.has-submenu .Gnav-menu-label:focus:after, #WebsitePrimaryNav .Gnav-menu-item.has-submenu .Gnav-menu-label:hover:after { 
 
    display: block; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.is-open>.Gnav-menu-label:after { 
 
    transform: none; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-label:after { 
 
\t position:absolute; 
 
\t right:20px; 
 
\t top:50%; 
 
\t margin-top:-1.33px; 
 
\t border-width:4px 4px 0; 
 
\t border-style:solid; 
 
\t border-color:#b2b2b2 transparent transparent; 
 
\t display:none; 
 
\t transition:-webkit-transform .1s ease; 
 
\t transition:transform .1s ease; 
 
\t transition:transform .1s ease,-webkit-transform .1s ease; 
 
\t -webkit-transform-origin:50% 33%; 
 
\t transform-origin:50% 33%; 
 
\t content:"" 
 
} 
 

 
#WebsitePrimaryNav .Gnav-submenus { 
 
    max-height: 0; 
 
    padding: 0; 
 
    visibility: hidden; 
 
    overflow: hidden; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-label:focus,#WebsitePrimaryNav .Gnav-menu-label:hover { 
 
background-color:#f4f4f4 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-label:after { 
 
\t bottom:9px; 
 
\t left:50%; 
 
\t right:auto; 
 
\t top:auto; 
 
\t margin-left:-3px; 
 
\t margin-top:auto; 
 
\t border-width:3px 3px 0; 
 
\t display:none 
 
} 
 

 
/* Gnav-submenus CSS ---------------------*/ 
 

 
#WebsitePrimaryNav.Gnav-wrapper ul{ 
 
    list-style: none; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-submenus { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    border-top: 1px solid #f3f3f3; 
 
    display: none; 
 
    transition: none; 
 
    overflow-y: auto; 
 
    background-color: #fff; 
 
    box-shadow: 1px 3px 3px rgba(0,0,0,.2); 
 
} 
 

 
#WebsitePrimaryNav .Gnav-menu-item.is-open>.Gnav-submenus { 
 
    max-height: 75vh; 
 
    display: flex; 
 
} 
 

 
/* Gnav-submenu-wrapper CSS ---------------------*/ 
 

 
#WebsitePrimaryNav .Gnav-submenu-wrapper { 
 
    position:relative; 
 
} 
 

 
#WebsitePrimaryNav .Gnav-submenu-wrapper+.Gnav-submenu-wrapper:before { 
 
position:absolute; 
 
    top:0; 
 
    right:0; 
 
    left:0; 
 
    margin:0 5px; 
 
    border-top:1px solid #f3f3f3; 
 
    content:"" 
 
} 
 

 
@media screen and (min-width:600px) { 
 
#WebsitePrimaryNav .Gnav-submenu-wrapper { 
 
    min-width:240px; 
 
    padding:25px 0; 
 
    flex-shrink:0; 
 
    white-space:nowrap; 
 

 
} 
 

 
#WebsitePrimaryNav .Gnav-submenu-wrapper+.Gnav-submenu-wrapper { 
 
    border-left:1px solid #f3f3f3; 
 

 
} 
 

 
#WebsitePrimaryNav .Gnav-submenu-wrapper+.Gnav-submenu-wrapper:before { 
 
    display:none 
 
} 
 

 
/* Gnav-submenu-headline CSS ---------------------*/ 
 

 
#WebsitePrimaryNav .Gnav-submenu-headline { 
 
    display: block; 
 
    margin: 0 0 15px; 
 
    padding: 10px 35px 0; 
 
    overflow: hidden; 
 
    font-size: 16px; 
 
    font-weight: 300; 
 
    color: #767676; 
 
}

<!-- START header HTML --> 
 
<div class="Gnav-active" style=""> 
 
    <header id="WebsitePrimaryNav" class="Gnav-wrapper" role="banner"> 
 
    <nav class="Gnav" role="navigation"> 
 
     <div class="Gnav-menu-wrapper"> 
 
     <div class="Gnav-menu-content"> 
 
      <ul class="Gnav-menu" data-gnav-scrollable="mobile"> 
 

 
      <li class="Gnav-menu-item has-submenu " id="xxxxxxxx"> 
 
       <a href="#" class="Gnav-menu-label" data-type="item" role="button"> 
 
           Articles 
 
          </a> 
 
       <ul class="Gnav-submenus" data-type="popup" role="group"> 
 
       <li class="Gnav-submenu-wrapper"> 
 
        <h5 class="Gnav-submenu-headline">Articles</h5> 
 
       </li> 
 

 
       </ul> 
 
      </li> 
 
      <li class="Gnav-menu-item has-submenu " id="xxxxxxxx"> 
 
       <a href="#" class="Gnav-menu-label" data-type="item" role="button"> 
 
           Guides 
 
          </a> 
 
       <ul class="Gnav-submenus" data-type="popup" role="group"> 
 

 
       <li class="Gnav-submenu-wrapper"> 
 
        <h5 class="Gnav-submenu-headline">Guides</h5> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </header> 
 
</div>

Quelle

2017-10-19 109881

Das erste Problem ist, dass Sie ein Klick-Ereignis in CSS haben. Sie müssen :hover oder :active Pseudo-Klassen verwenden.

Wenn Sie Ihren Subnav mit reinem CSS anzeigen möchten, sollten Sie :hover verwenden. Es ist wichtig, dass der verborgene Subnav ein Kind des schwebenden Elements ist. Dann können Sie es so lösen:

#nav ul .mainNav .subnav { 
    display: none; /* Subnav initially hidden */ 
} 
#nav ul .mainNav:hover .subnav { 
    display: block; /* Subnav shown while hovering mainNav */ 
}

Quelle

2017-10-19 12:30:30 hubatz

Es gibt ein Klick-Ereignis in der CSS vorhanden. – 109881

Dropdown-Menü erscheint nicht bei Mausklick

Antwort

Verwandte Themen