我在设置下拉菜单时遇到问题。当我点击按钮时会出现小菜单，但是当我尝试链接时它什么也不做。我已经尝试过指针事件并在链接上方寻找一些东西，什么可以从我的点击中隐藏这些链接，但我仍然无法弄清楚它可能是什么。
html代码：
<html>
<head>
<title>MainPage</title>
<link rel= "stylesheet" type= "text/css" href="{{url_for('static', filename='style.css')}}">
</head>
<body>
<nav class="Nav">
<p class="Name">HokusPokus</p>
<div class="Buttons">
<button><a href="home" class="home">Home</a></button>
<div class="dropdown">
<button>User</button>
<div class="dropdown-content">
<a href="login">Login</a>
<a href="register">Register</a>
</div>
</div>
</div>
</nav>
</body>
</html>
CSS代码：
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
height:100%;
}
body{
height:100%;
background-color: rgb(239, 239, 250);
}
.Name{
color:rgb(254, 95, 85);
position:relative;
font-size:40px;
font-family:Arial;
margin:0px 20px;
padding:10px
}
.Nav{
background-color: rgb(73, 88, 103);
width:100%;
display:flex;
align-items:center;
height:80px
}
.Buttons{
width:100%;
position:relative;
display:flex
}
.dropdown{
position: absolute;
right:150px
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(87, 115, 153);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
}
.dropdown-content a {
color: white;
padding:10px;
justify-content: center;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(254, 95, 85);
border-radius: 5px;
}
.Buttons button,a{
background: none;
text-decoration: none;
border: none;
color: white;
font-size: 18px;
cursor:pointer
}
.dropdown button:focus + .dropdown-content {
display:block;
}
.MainDiv{margin: auto;
position: relative;
margin-top:200px;
width:320px;
height:500px;
border-radius: 20px;
border: 4px rgb(87, 115, 153);
background-color: rgb(87, 115, 153);
padding:30px}
.Nadpis{
font-size:40px;
font-family:arial;}
.Input{
margin-bottom: 20px;
}```
我相信这是因为当我们点击链接时，我们点击了按钮焦点之外，所以根据您的 CSS，它会将下拉内容变为 display:none 并在跟随链接之前关闭弓。
为了证明我的观点，我在 dorpdown-content:hover 上添加了一个显示块，它似乎解决了它。尝试改变它，让我知道它是否能解决你的问题。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
height:100%;
}
body{
height:100%;
background-color: rgb(239, 239, 250);
}
.Name{
color:rgb(254, 95, 85);
position:relative;
font-size:40px;
font-family:Arial;
margin:0px 20px;
padding:10px
}
.Nav{
background-color: rgb(73, 88, 103);
width:100%;
display:flex;
align-items:center;
height:80px
}
.Buttons{
width:100%;
position:relative;
display:flex
}
.dropdown{
position: absolute;
right:150px
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(87, 115, 153);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
}
.dropdown-content a {
color: white;
padding:10px;
justify-content: center;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgb(254, 95, 85);
border-radius: 5px;
}
.Buttons button,a{
background: none;
text-decoration: none;
border: none;
color: white;
font-size: 18px;
cursor:pointer
}
.dropdown button:focus + .dropdown-content {
display:block;
}
.dropdown-content:hover{
display:block;
}
.MainDiv{margin: auto;
position: relative;
margin-top:200px;
width:320px;
height:500px;
border-radius: 20px;
border: 4px rgb(87, 115, 153);
background-color: rgb(87, 115, 153);
padding:30px}
.Nadpis{
font-size:40px;
font-family:arial;}
.Input{
margin-bottom: 20px;
}<html>
<head>
<title>MainPage</title>
<link rel= "stylesheet" type= "text/css" href="{{url_for('static', filename='style.css')}}">
</head>
<body>
<nav class="Nav">
<p class="Name">HokusPokus</p>
<div class="Buttons">
<button><a href="home" class="home">Home</a></button>
<div class="dropdown">
<button>User</button>
<div class="dropdown-content">
<a href="login" target="_blank">Login</a>
<a href="register">Register</a>
</div>
</div>
</div>
</nav>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句