我正在努力创建一个顶部导航菜单，该菜单还具有下拉内容。目前，我为菜单使用的整体样式正在应用于下拉菜单中的内容，尽管我为此创建了一个单独的样式。我认为我为下拉内容分配的两个类的交互方式存在冲突，但到目前为止我尝试的方法都没有成功。
/*Standard text formatting*/
body {
font-family: "Lucida Console";
}
/*Main Navigation for website*/
ul.MainNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.MainNavItem {
float: left;
}
li.MainNavItem.right {
float: right;
}
/*Causing problems with items in dropdown; color is applied everywhere*/
li.MainNavItem a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.MainNavItem a.active {
background-color: #4CAF50;
}
li.MainNavItem a:hover:not(.active),
.DropDown:hover {
background-color: #111;
}
/*Makes Main Navigation responsive*/
@media screen and (max-width: 800px) {
ul.MainNav li.MainNavItem.right,
ul.MainNav li.MainNavItem {
float: none;
}
}
/*Dropdown for Main Navigation*/
li.MainNavItem.DropDown {
display: inline-block;
}
/*Color style that should be used*/
.DropDown-Content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.DropDown-Content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.DropDown-Content a:hover {
background-color: #f1f1f1;
}
.DropDown:hover .DropDown-Content {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<title></title>
</head>
<body>
<ul class="MainNav">
<li class="MainNavItem"><a class="active" href="Index.html">Home</a>
</li>
<li class="MainNavItem DropDown"><a href="News.html">News</a>
<div class="DropDown-Content">
<a href="#CurrentProjects">Current Projects</a>
<a href="#Events">Events</a>
</div>
</li>
<li class="MainNavItem"><a href="Contact.html">Contact</a>
</li>
<li class="MainNavItem right"><a href="About.html">About</a>
</li>
</ul>
</body>
</html>我也知道当移动设备的屏幕尺寸缩小时，这不会正确显示，但我会继续单独解决这个问题。目前，在尝试修复菜单的响应能力之前，我专注于让样式发挥作用。
最佳答案
您的下拉标签 a 继承了 li.MainNavItem a 的样式。将 li.MainNavItem a 更改为 li.MainNavItem > a 会将样式限制为直接子项并阻止其应用于下拉列表。
关于html - 使用不正确样式的 CSS 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37188803/