我正在制作一個下拉選單，當我將顯示設定為無時，它似乎完全消失了。當你點擊它時，你可以在框中輸入，但我不希望這樣。我正在嘗試使下拉串列在您將滑鼠懸停在其上時彈出。有誰知道如何解決這一問題？
body {
margin:0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav > li {
display:Inline-block;
padding: 20px 50px 10px 9px;
}
.nav > li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear:both;
}
.subnav class{
margin: 0;
position:relative;
}
.subnav > div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.split {
height: 70%;
width: 50%;
position: fixed;
z-index: 1;
top: -50;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
font-size: 15px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
.dropdown {
position: relative;
margin-top: 20px;
width: 375px;
height: 35px;
}
.dropdown:: before {
content: '';
position: absolute;
right: 20px;
top: 15px;
width: 8px;
height: 8 px;
}
.dropdown input {
position: absolute;
top: 0;
left: 80px;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
outline: none;
box-shadow: 0 2px 5px;
padding: 8px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 52px;
width: 100%;
box-shadow: 0 2px 5px;
border-radius: 10px;
overflow: hidden;
left: 83px;
display: none;
}
.dropdown .option div {
padding: 12px 20px;
cursor: pointer;
}
.dropdown .option div:hover
{
background: #62baea;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
</div>
</div>
<div class="split right">
<div class="dropdown">
<input type="text" class="textBox"
placeholder="Select Your State">
<div class="dropdown-content">
<div class="option">
<div onclick="show('California')">California</div>
<div onclick="show('Illinois')">Illionis</div>
<div onclick="show('Michigan')">Michigan</div>
<div onclick="show('Ohio')">Ohio</div>
</div>
</div>
</body>
</html>[![我的下拉串列不會出現][1]][1] [1]: https://i.stack.imgur.com/TGmxt.png
uj5u.com熱心網友回復：
將此添加到您的 CSS
.dropdown:hover .option {
display: block;
}
uj5u.com熱心網友回復：
使用容器元素創建下拉選單并在其中添加下拉鏈接。<div>在按鈕周圍包裹一個元素，并使用 CSS 正確定位下拉選單。
<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>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
uj5u.com熱心網友回復：
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405461.html
標籤：
上一篇：創建由線連接的css圓