我在使用下拉框时遇到了一些麻烦。我想要我的 <a>元素没有下划线并且位于下拉内容的中间。你可以看到我的代码，我想从下拉内容中删除下划线，我希望它在悬停时是红色的。但是，每当我尝试这样做时，它都会给出错误的缺陷。
这是代码。测试一下，从逻辑上看问题!
<!DOCTYPE html>
<html>
<head>
<style>
/* Building navigation bar */
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
padding: 14px 20px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline;
}
/* Building about dropdown and the dropdown content */
.container {
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
position: absolute;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<div class="dropdown">
<li><a href="#about.html">About</a></li>
<div class="dropdown-content"><ul>
<a style="text-decoration = none;" href="#theMan.html">Hey</a>
<a href="#hahahaha.html">Hey</a>
</ul>
</div>
</div>
</ul>
</body>
</html>最佳答案
其中有大量无效的 HTML。 Div 不能是 ul 的子元素。您可能想先验证您的 HTML。
因此，对 HTML 进行一些重构以使其有效。
ul {
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
padding-bottom: 5px;
background-color: black;
display: block;
}
li a {
text-decoration: none;
display: block;
padding: 10px;
color: white;
}
li a:hover {
background-color: red;
}
li {
display: inline-block;
}
/* Building about dropdown and the dropdown content */
.container {
//width: 15em;
}
.dropdown {
position: relative;
}
.dropdown-content {
text-align: center;
position: absolute;
top: 100%;
left: 0;
display: none;
background-color: black;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}<ul>
<li><a href="home.html">Home</a>
</li>
<li><a href="news.html">News</a>
</li>
<li class="dropdown"><a href="#about.html">About</a>
<ul class="dropdown-content">
<li><a style="text-decoration = none;" href="#theMan.html">Hey</a>
</li>
<li><a href="#hahahaha.html">Hey</a>
</li>
</ul>
</li>
</ul>关于html - 下拉框去除样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39877567/