我的下拉菜單列表中的 href 屬性不起作用

Question

我正在嘗試為我自己開發的網站創建一個下拉菜單列表。 當我為我的網站制作下拉列表時，我遇到了一些問題。 當我嘗試單擊下拉菜單中的列表之一時，它不會指向或打開到 href 屬性引用它的頁面。 我的下拉菜單中的所有列表也是如此。 我該如何解決這個問題，以便我的 href 鏈接適用於我的每個列表？

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Bebas Neue', cursive; font-weight: 600; font-size: 30; background-color: #5D5C61; background-size: cover; }.dropdown { position: absolute; height: 9%; width: 100%; top: 0%; background: #C5C6C7; display: flex; justify-content: space-around; align-items: center; }.dropdown h2 { font-size: 60; position: relative; left: 30px; top: 3; padding: 0px; }.brands, .sneakers, .gears { position: relative; }.brands ul, .sneakers ul, .gears ul { position: absolute; top: 155%; background: #C5C6C7; margin-top: 18px; width: 200px; height: 210px; display: flex; overflow: hidden; justify-content: space-around; align-items: center; flex-direction: column; list-style: none; border-radius: 5px; font-weight: lighter; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: all 0.4s ease; }.brands a, .sneakers a, .gears a { color: black; text-decoration: none; }.brands li, .sneakers li, .gears li { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }.brands li:hover, .sneakers li:hover, .gears li:hover { background: #c6c0dd; }.dropdown button { background: none; border: none; color: black; font-size: 20px; font-weight: bold; text-decoration: none; cursor: pointer; }.dropdown button:hover { color: grey; }.dropdown h2 a { color: black; text-decoration: none; }.brands button:focus+ul, .sneakers button:focus+ul, .gears button:focus+ul { opacity: 1; pointer-events: all; transform: translateY(0px); }.brands button { position: relative; left: 53px; }.sneakers button { position: relative; left: 48px; }.gears button { position: relative; left: 10px; }

 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script> <nav> <div class="dropdown"> <h2><a href="test.html">RBZ</a></h2> <div class="brands"> <button>BRANDS</button> <ul> <li><a href="nikebrands.html">NIKE</a></li> <li><a href="nike.com">ADIDAS</a></li> <li><a href="#">JORDAN</a></li> </ul> </div> <div class="sneakers"> <button>SNEAKERS</button> <ul> <li><a href="microsoft.com">NIKE</a></li> <li><a href="#">ADIDAS</a></li> <li><a href="#">JORDAN</a></li> </ul> </div> <div class="gears"> <button>GEAR & APPAREL</button> <ul> <li><a href="playstation.com">BACKPACK</a></li> <li><a href="#">CLOTHES</a></li> <li><a href="#">ACCESSORIES</a></li> </ul> </div> </div> </nav>

Answer 1

您的問題是使用focus顯示下拉菜單。 當您單擊離開按鈕的那一刻，即單擊菜單上的鏈接時，它不再是焦點，因此您的下拉菜單消失了。 我建議使用onclick function 或使用復選框而不是按鈕來實現您想要的。

這是一個使用復選框方法的示例。

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Bebas Neue', cursive; font-weight: 600; font-size: 30; background-color: #5D5C61; background-size: cover; }.dropdown { position: absolute; height: 9%; width: 100%; top: 0%; background: #C5C6C7; display: flex; justify-content: space-around; align-items: center; }.dropdown h2 { font-size: 60; position: relative; left: 30px; top: 3; padding: 0px; }.brands, .sneakers, .gears { position: relative; }.brands ul, .sneakers ul, .gears ul { position: absolute; top: 155%; background: #C5C6C7; margin-top: 18px; width: 200px; height: 210px; display: none; overflow: hidden; justify-content: space-around; align-items: center; flex-direction: column; list-style: none; border-radius: 5px; font-weight: lighter; transform: translateY(-10px); transition: all 0.4s ease; }.brands a, .sneakers a, .gears a { color: black; text-decoration: none; }.brands li, .sneakers li, .gears li { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }.brands li:hover, .sneakers li:hover, .gears li:hover, .box:hover { background: #c6c0dd; }.box { background: none; border: none; color: black; font-size: 20px; font-weight: bold; text-decoration: none; cursor: pointer; }.box:hover { color: grey; }.dropdown h2 a { color: black; text-decoration: none; }.box input { display: none; }.box input:checked +ul{ display: flex; pointer-events: all; transform: translateY(0px); }.brands button { position: relative; left: 53px; }.sneakers button { position: relative; left: 48px; }.gears button { position: relative; left: 10px; }

 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script> <nav> <div class="dropdown"> <h2><a href="test.html">RBZ</a></h2> <div class="brands"> <label class="box">BRANDS <input type="checkbox" > <ul> <li><a href="google.com">NIKE</a></li> <li><a href="https://www.nike.com/">ADIDAS</a></li> <li><a href="#">JORDAN</a></li> </ul> </label> </div> <div class="sneakers"> <label class="box">SNEAKERS <input type="checkbox" > <ul> <li><a href="microsoft.com">NIKE</a></li> <li><a href="#">ADIDAS</a></li> <li><a href="#">JORDAN</a></li> </ul> </label> </div> <div class="gears"> <label class="box">GEAR & APPAREL <input type="checkbox" > <ul> <li><a href="playstation.com">BACKPACK</a></li> <li><a href="#">CLOTHES</a></li> <li><a href="#">ACCESSORIES</a></li> </ul> </label> </div> </div> </nav>

Answer 2

您的問題是pointer-events ，特別是pointer-events:all ，它是實驗性的，無論如何僅適用於 SVG 。 使用pointer-events:auto代替。

同樣正如約翰在他的回答中提到的那樣，您將在單擊另一個元素（例如使用按鈕上的焦點的鏈接）時獲得競爭條件。 應該重新考慮您對此的總體方法。

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: 'Bebas Neue', cursive; font-weight: 600; font-size: 30; background-color: #5D5C61; background-size: cover; }.dropdown { position: absolute; height: 9%; width: 100%; top: 0%; background: #C5C6C7; display: flex; justify-content: space-around; align-items: center; }.dropdown h2 { font-size: 60; position: relative; left: 30px; top: 3; padding: 0px; }.brands, .sneakers, .gears { position: relative; }.brands ul, .sneakers ul, .gears ul { position: absolute; top: 155%; background: #C5C6C7; margin-top: 18px; width: 200px; height: 210px; display: flex; overflow: hidden; justify-content: space-around; align-items: center; flex-direction: column; list-style: none; border-radius: 5px; font-weight: lighter; opacity: 0; /*pointer-events: none;*/ transform: translateY(-10px); transition: all 0.4s ease; }.brands a, .sneakers a, .gears a { color: black; text-decoration: none; }.brands li, .sneakers li, .gears li { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }.brands li:hover, .sneakers li:hover, .gears li:hover { background: #c6c0dd; }.dropdown button { background: none; border: none; color: black; font-size: 20px; font-weight: bold; text-decoration: none; cursor: pointer; }.dropdown button:hover { color: grey; }.dropdown h2 a { color: black; text-decoration: none; }.brands button:focus+ul, .sneakers button:focus+ul, .gears button:focus+ul { opacity: 1; pointer-events: auto; transform: translateY(0px); }.brands button { position: relative; left: 53px; }.sneakers button { position: relative; left: 48px; }.gears button { position: relative; left: 10px; }

 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/fb27f216f1.js" crossorigin="anonymous"></script> <nav> <div class="dropdown"> <h2><a href="test.html">RBZ</a></h2> <div class="brands"> <button>BRANDS</button> <ul> <li><a href="nikebrands.html">NIKE</a></li> <li><a href="nike.com">ADIDAS</a></li> <li><a href="#">JORDAN</a></li> </ul> </div> <div class="sneakers"> <button>SNEAKERS</button> <ul> <li><a href="microsoft.com">NIKE</a></li> <li><a href="#">ADIDAS</a></li> <li><a href="#">JORDAN</a></li> </ul> </div> <div class="gears"> <button>GEAR & APPAREL</button> <ul> <li><a href="playstation.com">BACKPACK</a></li> <li><a href="#">CLOTHES</a></li> <li><a href="#">ACCESSORIES</a></li> </ul> </div> </div> </nav>

Answer 3

問題來自您的 css。 刪除這一行 pointer-events: none; The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible