为什么不显示子菜单：当我悬停时阻止？ （我是初学者编码员）

Question

我做了一个悬停下拉菜单。我看起来不错，当你悬停时颜色变化很好，但是当你悬停时子菜单不会下降。这是我的第一个下拉菜单，我不知道为什么它不会工作？请帮帮我。

width: 750px;
margin: 1em auto;

}
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
ul.dropdown {
  position: relative;
  width: 100%;
}
ul.dropdown li {
  font-weight: bold;
  float: left;
  width: 180px;
  position: relative;
  background: #ecf0f1;
}
ul.dropdown a:hover {
  color: #000;
}
ul.dropdown li a {
  display: block;
  padding: 20px 8px;
  color: #34495e;
  position: relative;
  z-index: 2000;
  text-align: center;
  text-decoration: none;
  font-weight: 300;
}
ul.dropdown li a:hover,
ul.dropdown li a.hover {
  background: #3498db;
  position: relative;
  color: #fff;
}
ul.dropdown ul {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  z-index: 1000;
}
ul.dropdown ul li {
  font-weight: normal;
  background: #f6f6f6;
  color: #000;
  border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a {
  display: block;
  color: #34495e !important;
  background: #eee !important;
}
ul.dropdown ul li a:hover {
  display: block;
  background: #3498db !important;
  color: #fff !important;
}
.drop>a {
  position: relative;
}
.drop>a:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  z-index: 999;
}
.drop>a:hover:after {
  content: "";
  border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}

<!-- body -->
<nav>
  <!-- menu 1 -->
  <ul class="dropdown">
    <li class="drop"><a href="#">Menu 1</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
        <li><a href="#">Display 4</a></li>
        <li><a href="#">Display 5</a></li>
      </ul>
    </li>
    <!-- menu 2 -->
    <li class="drop"><a href="#">Menu 2</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
        <li><a href="#">Display 4</a></li>
      </ul>
    </li>
    <!-- menu 3 -->
    <li class="drop"><a href="#">Menu 3</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
      </ul>
    </li>
    <!-- menu 4 -->
    <li class="drop"><a href="#">Menu 4</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
    </li>
    </ul>
    </li>
</nav>

Answer 1

为此，您必须在代码中包含以下CSS：

ul.dropdown li.drop:hover > .sub_menu {
    display: block;
}

Answer 2

width: 750px;
margin: 1em auto;

}
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
ul.dropdown {
  position: relative;
  width: 100%;
}
ul.dropdown li {
  font-weight: bold;
  float: left;
  width: 180px;
  position: relative;
  background: #ecf0f1;
}
ul.dropdown a:hover {
  color: #000;
}
ul.dropdown li a {
  display: block;
  padding: 20px 8px;
  color: #34495e;
  position: relative;
  z-index: 2000;
  text-align: center;
  text-decoration: none;
  font-weight: 300;
}
ul.dropdown li a:hover,
ul.dropdown li a.hover {
  background: #3498db;
  position: relative;
  color: #fff;
}
ul.dropdown ul {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  z-index: 1000;
}


ul.dropdown .drop:hover > ul {display: block;}




ul.dropdown ul li {
  font-weight: normal;
  background: #f6f6f6;
  color: #000;
  border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a {
  display: block;
  color: #34495e !important;
  background: #eee !important;
}
ul.dropdown ul li a:hover {
  display: block;
  background: #3498db !important;
  color: #fff !important;
}
.drop>a {
  position: relative;
}
.drop>a:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 40%;
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
  z-index: 999;
}
.drop>a:hover:after {
  content: "";
  border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
}

<!-- body -->
<nav>
  <!-- menu 1 -->
  <ul class="dropdown">
    <li class="drop"><a href="#">Menu 1</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
        <li><a href="#">Display 4</a></li>
        <li><a href="#">Display 5</a></li>
      </ul>
    </li>
    <!-- menu 2 -->
    <li class="drop"><a href="#">Menu 2</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
        <li><a href="#">Display 4</a></li>
      </ul>
    </li>
    <!-- menu 3 -->
    <li class="drop"><a href="#">Menu 3</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
      </ul>
    </li>
    <!-- menu 4 -->
    <li class="drop"><a href="#">Menu 4</a>
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
    </li>
    </ul>
    </li>
</nav>

Answer 3

主要原因是你没有:hover选择器，当顶级菜单项悬停时，它会显示下拉列表。使用以下命令显示子菜单。

.dropdown li:hover .sub_menu {
  display: block;
}

我还清理了一下你的CSS。删除无用的选择器部件，重要的语句和重复的样式。

ul,
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.dropdown>li {
  position: relative;
  float: left;
}

.dropdown a {
  display: block;
  text-decoration: none;
}

.dropdown a:hover {
  display: block;
}

.dropdown>li,
.dropdown a {
  position: relative;
  float: left;
  width: 180px;
  padding: 20px 8px;
  color: #34495e;
  text-align: center;
  font-weight: 300;
  background: #ecf0f1;
}

.dropdown li:hover,
.dropdown a:hover {
  color: #fff;
  background: #3498db;
}

.dropdown > li:after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY( -50% );
  border-left: 5px solid transparent;
  border-top: 5px solid #333;
  border-right: 5px solid transparent;
}
.dropdown > li:hover:after {
  border-top-color: #fff;
}

.dropdown .sub_menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.dropdown li:hover .sub_menu {
  display: block;
}

.dropdown .sub_menu li {
  border-bottom: 1px solid #ccc;
}

<nav>
  <ul class="dropdown">
    <li>
      Menu 1
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
        <li><a href="#">Display 4</a></li>
        <li><a href="#">Display 5</a></li>
      </ul>
    </li>
    <li>
      Menu 2
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
        <li><a href="#">Display 4</a></li>
      </ul>
    </li>
    <li>
      Menu 3
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
        <li><a href="#">Display 3</a></li>
      </ul>
    </li>
    <li>
      Menu 4
      <ul class="sub_menu">
        <li><a href="#">Display 1</a></li>
        <li><a href="#">Display 2</a></li>
      </ul>
    </li>
  </ul>
</nav>