[英]Doing a dropdown button in css
我正在嘗試在我的網站中加入一個下拉按鈕，但我不知道為什么按鈕的內容顯示不正確：
<body>
<div class="topnav">
<a id="inicio" href="index.php">Inicio</a>
<a id="contacto" href="login.php" >Login</a>
<a id="contacto" href="registro.php">Registro</a>
<a id="contacto" href="#" >Contacto</a>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Iniciar sesion</a>
</div>
</div>
<input type="text" placeholder="Search..">
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
你可以在這里嘗試代碼： https : //jsfiddle.net/pgn6yw5f/
經過一番搜索
這是一個下拉菜單的示例，它僅使用 CSS 來提高性能
.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; }
<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>
有關僅 CSS 下拉菜單的更多示例，請查看此處
在 CSS 文件中設置下拉內容 a 的背景顏色。 下面是一個例子
dropdown-content a {
/* Your other styling */
background-color: inherit;
}
這解決了顯示問題。
如果執行多個按鈕，javascript ul按鈕下拉列表將崩潰
[英]javascript ul button dropdown crashes after if doing more than 1 button
如何將“本周”按鈕變成下拉菜單？ 我究竟做錯了什么？
[英]How to turn the “this week” button into a dropdown? what am i doing wrong?
如何使用 javascript 和 css 制作可點擊的下拉按鈕？
[英]How do I make a clickable dropdown button with javascript and css?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.