鼠标悬停时不显示下拉列表答案

【问题标题】：Drop-down list doesn't appear on mouse hover鼠标悬停时不显示下拉列表
【发布时间】：2015-12-21 14:48:17
【问题描述】：

我试图在鼠标悬停时显示一个下拉菜单，但由于某种原因，该菜单没有出现。

* {
  margin: 0;
  padding: 0;
}

.header {
  position: fixed;
  list-style-type: none;
  height: 35px;
  width: 100%;
  overflow: hidden;
  background: #333333;
}

.header > li {
  display: inline-block;
  padding: 8px;
}

.header > li:hover {
  background: #000000;
}

.home {
  margin-left: 10%;
}

.home a:link {
  color: #FFF;
}

.home a:visited {
  color: #AAA;
}

.home a:hover {
  color: #00F;
}

.home a:active {
  color: #F00;
}

.dropdown {
  display: block; /* I guess that something is wrong here */
  width: auto;
  color: #FFF;
}

.dropdown li {
  list-style-type: none;
  display: block; /* I guess that something is wrong here too */
  position: absolute; /* and here */
  top: 100%;
  color: red;
  width: auto;
  opacity: 0;
  background: yellow;
  border: 1px solid black;
  transition: opacity 1s;
}

.dropdown:hover,
.dropdown li:hover {
  opacity: 1;
}

.main {
  margin-top: 20px;
  padding-top: 20px;
  height: 50px;
  display: block;
  background: white;
  text-align: center;
  font-size: 20px;
  transition: background 1s;
}

.main:hover {
  background: #CCCCCC;
}

<body>
  <ul class="header">
    <li class="home"><a href="#">&#8962; Home</a>
    </li>
    <li class="dropdown">Dropdown &#10097;
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </li>
  </ul>

  <br>

  <section>
    <div class="main">
      Content...
    </div>
  </section>
</body>

我正在尝试仅使用 CSS 和 HTML 来做到这一点。

我在我认为导致问题的三行旁边发表了评论，但我似乎无法弄清楚。问题是什么？我该如何解决？

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

首先，我们从标题中删除overflow:hidden，这将完全阻止子菜单显示。

那么父li应该设置为position:relative，子ul设置为position:absolute（而不是个人li）。

删除:hover 上的display:none 即可。

* {
  margin: 0;
  padding: 0;
}
.header {
  position: fixed;
  list-style-type: none;
  height: 35px;
  width: 100%;
  /*overflow: hidden;*/
  background: #333333;
}
.header > li {
  display: inline-block;
  padding: 8px;
}
.header > li:hover {
  background: #000000;
}
.home {
  margin-left: 10%;
}
.home a:link {
  color: #FFF;
}
.home a:visited {
  color: #AAA;
}
.home a:hover {
  color: #00F;
}
.home a:active {
  color: #F00;
}
.dropdown {
  color: #FFF;
  position: relative;
}
.dropdown ul {
  list-style-type: none;
  position: absolute;
  /* and here */
  top: 100%;
  left: 0;
  color: red;
  width: auto;
  display: none;
  background: yellow;
  border: 1px solid black;
}
.dropdown:hover ul {
  display: block;
}
.main {
  margin-top: 20px;
  padding-top: 20px;
  height: 50px;
  display: block;
  background: white;
  text-align: center;
  font-size: 20px;
  transition: background 1s;
}
.main:hover {
  background: #CCCCCC;
}

<body>
  <ul class="header">
    <li class="home"><a href="#">&#8962; Home</a>
    </li>
    <li class="dropdown">Dropdown &#10097;
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    </li>
  </ul>

  <br>

  <section>
    <div class="main">
      Content...
    </div>
  </section>
</body>

【讨论】：

我认为 .dropwdown li {opacity: 0; } 也是自己的一小部分，Paulie :D
我把它拿出来了……就问题而言，这不是真的必要。
我知道你有足够的信息来回答每一个 CSS 问题，但你没有这样做。您总是更喜欢发表评论而不是发布答案。
取决于我有多少时间。有时只需要一条评论……有时需要更长的解释。