如何使用 flexbox 使這個下拉菜單工作？

Question

我正在嘗試使用 flexbox 制作這個下拉按鈕，但它沒有按我的意願工作。 當我使用顯示屬性在按鈕周圍 hover 時，它不顯示。 有人可以編輯此代碼以使下拉菜單起作用嗎？

Answer 1

這是你想要的嗎

 function Enable(){ x = document.getElementById("Ulist"); if(x.className == "display"){ x.className += " active"; }else{ x.className == "display"; } }

 li{ list-style: none; }.Maincover{ display: flex; flex-direction: column; align-items: center; height: 300px; } button{ font-family: montserrat; font-weight: 500; width: 100px; border-radius: 5px; color: white; border: 0px; padding: 5px 10px; text-align: center; background-color: tomato; }.list{ font-family: rubik; text-align: center; margin-top: 10px; }.display{ padding:0px; display: none; }.display.active{ display: block; }.hoverbutton:hover ~.display{ display: block; }

 <div class="Maincover"> <button class="hoverbutton" onclick="Enable()">Hover Here</button> <ul class="display" id="Ulist"> <li class="list" id="lists">List item 1</li> <li class="list" id="lists">List item 2</li> <li class="list" id="lists">List item 3</li> </ul> </div>

Answer 2

在這里，我附加了 html 和 css 代碼，用於使用 flex 的可懸停下拉菜單。

 .menu-area{ margin: 0; padding: 0; box-sizing: border-box; width:150px; display:flex; flex-direction:column; justify-content:center; }.menu-area a{ display: flex; align-items: center; justify-content: center; color: #fff; background: darkslategrey; height: 60px; font-family:Poppins; font-weight: bold; text-decoration: none; }.menu-area a:hover{ background: tomato; color: #fff; }.menu-area ul{ list-style: none; display: flex; }.menu-area li{ position: relative; width: 100%; text-align: center; }.menu-area li:hover.dropdown-1 > li{ display: block; top: 0; }.dropdown-1 li{ display: none; position: relative; }.dropdown-1{ position: absolute; display: flex; flex-direction: column; width: 100%; }.dropdown-1 li:hover.dropdown-2 li{ display: block; }.dropdown-2 li{ display: none; }.dropdown-2{ display: flex; flex-direction: column; position: absolute; top: 0; left: 100%; width: 100%; }.banner-area{ background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://i.postimg.cc/Y0YM36yL/aa.jpg); -webkit-background-size:cover; background-size:cover; background-position: center center; display: flex; align-items: center; justify-content: center; height: calc(100vh - 60px); }.banner-area h1 { text-transform: uppercase; color: #fff; font-size: 100px; font-family: poppins; letter-spacing: 2px; }

 <div class="menu-area"> <ul> <li><a href="#">Dropdown</a> <ul class="dropdown-1"> <li><a href="#">service one</a></li> <li><a href="#">service two</a></li> <li><a href="#">service three</a> </li> </ul> </li> </ul> </div>