1
単純なCSSドロップダウンメニューを実装しようとしています。マウスクリック時にドロップダウンメニューが表示されない
この実装が動作しない理由については、次のHTML/CSSコードで問題を見つけることができません。
ヘッダーボタンをクリックしてもわかるように、単に何の応答も得られません。
CSSに精通したポスターがあれば、問題の可能性があることを知らせることができます。
/* Gnav-menu-label:after CSS ---------------------*/
どこに問題があるのですか。
/* 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>
CSSにクリックイベントがあります。 – 109881