创建一个下拉菜单

-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

创建一个下拉菜单

回答

相关问题