当我将鼠标移到导航栏上时，不会出现下拉菜单

Question

美好的一天， 我试图在我的新网站上创建一个下拉菜单，但找不到它不出现的原因。 它应该出现在“关于”下，但是当我点击它时什么也没有出现！ 有人可以帮助我吗？

也许问题与 display:none// display:block 有关？

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  background-color: #101010;
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.header {
  width: 100%;
  height: 200px;
  display: block;
  background-color: #101010;
}

.inner_header {
  width: 1000px;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: red;
}

.logo_container {
  height: 100%;
  display: table;
  float: right;
  position: relative;
  right: 40%;
}

.logo_container h1 {
  color: bisque;
  font-family: "Whisper", cursive;
  font-weight: 400;
  font-style: normal;
}

.menu_navbar {
  background: blue;
  text-align: center;
}

.menu_navbar ul {
  display: inline-flex;
  list-style: none;
  color: bisque;
  text-align: center;
}

.menu_navbar ul li {
  width: 120px;
  margin: 15px;
  padding: 15px;
}

.menu_navbar ul li a {
  text-decoration: none;
  color: bisque;
}

.active,
.menu_navbar ul li:hover {
  background: transparent;
}

.sub_menu_navbar_1 {
  display: none;
}

.menu_navbar ul li:hover .sub_menu_navbar_1 {
  display: block;
  position: absolute;
  background: blue;
  margin-top: 15px;
  margin-left: -15px;
}

.menu_navbar ul li:hover .sub_menu_navbar_1 ul {
  display: block;
  margin: 10px;
}

<header>
  <div class="header">
    <div class="inner_header">
      <div class="logo_container">
        <h1>Céramique & Porcelaine</h1>
      </div>
    </div>
  </div>
</header>

<div class="menu_navbar">
  <ul>
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">About</a></li>
    <div class="sub_menu_navbar_1">
      <ul>
        <li><a href="#">The Shop</a></li>
        <li><a href="#">The Artist</a></li>
      </ul>
    </div>
    <li><a href="#">Contact</a></li>

  </ul>
</div>

提前谢谢您！

Answer 1

问题就在这里

.menu_navbar ul li:hover .sub_menu_navbar_1 ul{
    display: block;
    margin: 10px;
    
}

根据您的样式规则，要触发 sub_menu_navbar 上的悬停效果，该元素需要位于 li 元素内部。就像下面这样，

      <li>
        <a href="#">About</a>
        <div class="sub_menu_navbar_1">
          <ul>
            <li><a href="#">The Shop</a></li>
            <li><a href="#">The Artist</a></li>
          </ul>
        </div>
      </li>

我希望这有帮助。