【发布时间】：2021-11-05 20:11:09
【问题描述】：
我正在使用 Tailwind 开发网站。我想让 2 级导航菜单在向下滚动时始终打开和关闭。我尝试使用 display: block，但我所拥有的，它覆盖了 flex 规则。我确实在“ul”标签中使用了三元代码，但它不起作用。
请看我期待的截图：
目前，我将 open 类放在 ul 标记中，试图使 Level 2 始终打开。非常感谢您的意见
@tailwind base;
@tailwind components;
@tailwind utilities;
.work-sans {
font-family: 'Work Sans', sans-serif;
}
#menu-toggle:checked + #menu {
display: block;
}
.hover\:grow {
transition: all 0.3s;
transform: scale(1);
}
.hover\:grow:hover {
transform: scale(1.02);
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #000;
/*Set to match the Tailwind colour you want the active one to be */
}
.mega-menu {
display: none;
left: 0px;
position: absolute;
text-align: left;
width: 100%;
}
.mega-menu > .open {
height: auto!important;
visibility: visible!important;
}
.hoverable {
position: static;
}
.hoverable > a:after {
content: "\25BC";
font-size: 10px;
padding-left: 12px;
position: relative;
top: -1px;
}
.hoverable:hover .mega-menu {
display: flex;
}<div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu">
<nav>
<ul class="md:flex flex-wrap items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
<li class="hoverable text-gray-500 hover:text-black">
<a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-4" href="#">Shop</a>
<ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu open">
<li class="pl-7">
<a class="text-sm">Prams & Strollers</a>
<!--Cards for Level 3 - design in card-->
<!--<div>
<p></p>
<a>Jive3</a>
<a>Jive3 Platinum</a>
<a>Metro</a>
<a>Jive</a>
<a>Explore more</a>
</div>-->
</li>
<li class="px-5"><a class="text-sm">Baby Carriers</a></li>
<li class="px-5"><a class="text-sm">Nursey</a></li>
<li class="px-5"><a class="text-sm">Feeding</a></li>
<li class="px-5"><a class="text-sm">Bundles</a></li>
<li class="px-5"><a class="text-sm">Capsules</a></li>
<li class="px-5"><a class="text-sm">Accessories</a></li>
<li class="px-5"><a class="text-sm">Need help deciding?</a></li>
</ul>
</li>
<li class="hoverable text-gray-500 hover:text-black">
<a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-4" href="#">Demonstrations</a>
<ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu">
<li class="pl-7">
<a class="text-sm">Demos on Demand</a>
<!--Cards for Level 3 - design in card-->
<!--<div>
<p></p>
<a>Jive3</a>
<a>Jive3 Platinum</a>
<a>Metro</a>
<a>Jive</a>
<a>Explore more</a>
</div>-->
</li>
<li class="px-5"><a class="text-sm">In-Person</a></li>
<li class="px-5"><a class="text-sm">Events & Expos</a></li>
<li class="px-5"><a class="text-sm">Live Q&A</a></li>
</ul>
</li>
<li class="hoverable text-gray-500 hover:text-black">
<a class="relative inline-block no-underline text-base hover:text-black py-1.5 px-3" href="#">About Us</a>
<ul class="flex flex-row h-auto bg-gray-300 p-2 mega-menu">
<li class="pl-7">
<a class="text-sm">For Purpose</a>
<!--Cards for Level 3 - design in card-->
<!--<div>
<p></p>
<a>Jive3</a>
<a>Jive3 Platinum</a>
<a>Metro</a>
<a>Jive</a>
<a>Explore more</a>
</div>-->
</li>
<li class="px-5"><a class="text-sm">Our Origins</a></li>
<li class="px-5"><a class="text-sm">Why Redsbaby?</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!--Logo section-->
<div class="order-1 md:order-2">
<a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
Redsbaby
</a>
</div>
<!--Search, Profile, Cart-->
<div class="order-2 md:order-3 flex items-center" id="nav-content">
<a class="inline-block no-underline text-base text-gray-500 hover:text-black" href="#">Need help?</a>
<a class="pl-5 inline-block no-underline text-gray-500 hover:text-black" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</a>
<a class="pl-5 inline-block no-underline text-gray-500 hover:text-black" href="#">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<circle fill="none" cx="12" cy="7" r="3" />
<path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" />
</svg>
</a>
<a class="pl-5 pr-3 inline-block no-underline text-gray-500 hover:text-black" href="#">
<svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" />
<circle cx="10.5" cy="18.5" r="1.5" />
<circle cx="17.5" cy="18.5" r="1.5" />
</svg>
</a>
</div>【问题讨论】：
标签： javascript css tailwind-css