Question

在从HTML / CSS中长时间休息之后，我最近使用我之前使用过的方法创建了一个带下拉链接的菜单，并且惊讶地发现它们的这个应用程序无效。

我用过这个

ul li:hover ul{ display:block;}

在悬停时“打开”我的菜单，但它们根本不会出现。我尝试在各种代码块周围添加div标签无济于事。我错过了什么招数？

jsfiddle here：https://jsfiddle.net/qccs4mLL/

Answer 1

您的html未与您的css选择器对齐。

ul.menu li:hover > ul {
  display: block;
  background: green;
}

没有任何ul元素是li元素的直接子元素。您可以更改html，因此ul是li元素的直接子项。

body {
  margin: 0px;
}
a {
  text-decoration: none;
  width: 8em;
  /*width of each link*/
}
/*format list*/

ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.menu {
  height: 2.5em;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #454545;
}
ul.menu li {
  float: left;
  position: relative;
}
ul.menu li a {
  cursor: pointer;
  display: block;
  color: white;
  line-height: 2.5em;
  padding: 0 10px;
}
ul.menu ul {
  background: #555;
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
ul.menu li:hover {
  background: red;
}
ul.menu li:hover > ul {
  display: block;
  background: green;
}

<body>
  <!--Heading-->
  <!--Should change when scrolled down/on mobile-->

  <h1 class="heading">Title</h1>

  <!--Create Menus-->
  <nav>
    <ul class="menu">
      <li><a href="index.html">link1</a>
        <ul>
          <li><a href="#">sublink1</a>
          </li>
        </ul>
      </li>
      <!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->

      <li><a href="#">link2</a>
        <ul>
          <li><a href="#">sublink1</a>
          </li>
          <li><a href="#">sublink2</a>
          </li>
          <li><a href="#">sublink3</a>
          </li>
          <li><a href="#">sublink4</a>
          </li>
        </ul>
      </li>

      <li><a href="#">link3</a>
      </li>
      <li><a href="#">link4</a>
      </li>
    </ul>
  </nav>
</body>

悬停时不显示下拉链接

1 个答案: