我想做一个两层的菜单，我可以悬停在我的导航栏中的一个按钮，创建一个菜单。当顶层按钮不是链接时，我的代码工作得很好，但是当我在它们周围放置标记时，它就不工作了。
https://jsfiddle.net/wollie_/s40mucLy/3/
网址：
<body style="background-color:white;">
<div class="navbar">
<div class = "dropdown">
<a href="index.html" class = "inner-drop"><button class = "dropbtn">doesn't work-no dropdown
</button></a>
</div>
<div class="dropdown">
<a><button class="dropbtn">works-no dropdown
</button></a>
<div class="dropdown-content">
<a class = "inner-drop" href="pizza.html">Pizza</a>
<a class = "inner-drop" href="cheeseburger.html">Cheeseburger</a>
<a class = "inner-drop"href="ramen.html">Ramen</a>
<a class = "inner-drop" href="dog-fried-rice.html">Dog Fried Rice</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Desserts
</button>
<div class="dropdown-content">
<a href="egg-tarts.html">Egg Tarts</a>
<a href="tiramisu.html">Tiramisu</a>
<a href="mooncake.html">Mooncakes</a>
<a href="red-bean-buns.html">Red Bean Bun</a>
<a href="cheesecake.html">Cheesecake</a>
<a href="ice-cream.html">Ice Cream</a>
<a href="cupcake.html">Cupcakes</a>
</div>
</div>
</div>
</body>CSS：
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
justify-content: center;
text-align: center;
}
.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;
}第一个菜单有一个标签，但被悬停时的问题遮住了。第二个菜单工作，但没有标签。
我也想知道如何在页面的中间中心的导航按钮，如果可能的话。
我试着编辑css，但我不能告诉什么似乎是问题。我需要有一个按钮也有一个链接到自己的网页。
重要：这是一个学校项目和代码.ORG不允许JS.我已经试过了。
1条答案
按热度按时间ktecyv1j1#
在你的css中使用
.dropdown > *:not(:first-child) {而不是.navbar a {。当你使用.navbar a {选择器设计链接的样式时，导航栏中的每个链接都会被设计样式（包括带有按钮的链接），使用.dropdown > *:not(:first-child) {，你可以设计“. xml”容器中的每个链接的样式，而不是第一个带有按钮的链接。关于按钮的居中，您可以将display: flex和justify-content: center添加到.navbar类中。