Question

我正在制作一个顶级导航菜单，其中还包含下拉内容。目前，我正在使用菜单的整体样式应用于下拉菜单中的内容，即使我已为此创建了单独的样式。我相信我为下拉内容分配的两个类是如何交互的，但我迄今为止尝试过的方法并没有成功。

＆＃13;

/*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;
}

＆＃13;

<!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>

＆＃13;

我也知道，当移动设备的屏幕尺寸缩小时，这无法正常显示，但我将继续单独处理。现在，在尝试修复菜单的响应性之前，我正专注于让风格发挥作用。

Answer 1

您的下拉标记是从li.MainNavItem a继承样式。将li.MainNavItem a更改为li.MainNavItem > a会限制指导儿童的风格，并阻止其应用于下拉列表。

CSS下拉菜单使用不正确的样式

1 个答案: