創建一個下拉菜單

-7

我創造一個下拉菜單的網頁的問題。我想要一個下拉菜單懸停在我的文本上，不知道如何創建它，並試圖做一個但仍然卡住。有人願意幫忙嗎？另外，用CSS創建它。創建一個下拉菜單

這裏就是我想要的。

<ul> 
    <li><a href="#">Women</a></li> 
    <li><a href="#">Men</a></li> 
    <li><a href="#">Children</a></li> 
    </ul>

來源

2017-09-22 Codingjr

你試過了些什麼CSS？你的清單看起來好像沒有「最高」的價值從下拉？你想要什麼樣的最終結果？ – scunliffe

你應該完全按照你在問題標題中的內容，你會看到很多例子。這裏是一個關於你問什麼的教程演示：https：//www.w3schools.com/howto/howto_js_dropdown.asp – MUlferts

如果我的理解對不對，你想有一個下拉，當你將鼠標懸停在下拉列表的文本發生。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 
</style> 
</head> 
<body> 

    <h2>Dropdown Menu</h2> 
    <p>Move the mouse over the button to open the dropdown menu.</p> 

    <div class="dropdown"> 
     <button class="dropbtn">My Links</button> 
     <div class="dropdown-content"> 
      <a href="#">Women</a> 
      <a href="#">Men</a> 
      <a href="#">Children</a> 
     </div> 
    </div> 

</body> 
</html>

來源

2017-09-22 21:02:08

這是一個JSFiddle。 https://jsfiddle.net/x1rhveLh/ –

這是一個純粹的css解決方案。當您懸停在dropdown-trigger上時，您可以顯示dropdown-menu。

.dropdown-wrapper { 
 
    position: relative; 
 
} 
 

 
.dropdown-wrapper:hover .dropdown-menu { 
 
    display: block !important; 
 
} 
 

 
.dropdown-menu { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    
 
    background-color: lightblue; 
 
    padding: 10px; 
 
    list-style: none; 
 
    width: 100px; 
 
}

<div class="dropdown-wrapper"> 
 
    <p class="dropdown-trigger">Show dropdown on hover</p> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Women</a></li> 
 
    <li><a href="#">Men</a></li> 
 
    <li><a href="#">Children</a></li> 
 
    </ul> 
 
</div>

來源

2017-09-22 20:49:23 brian17han

你應該讓下拉菜單保留下來，這樣你就可以點擊它的鏈接。 – jack

@jack謝謝，我更新了我的代碼，現在菜單將保留，您可以點擊它。 – brian17han

創建一個下拉菜單

回答

相關問題