Question

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

* {
  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。

我已经评论了三条线，我认为这些问题引起了问题，但我似乎无法弄明白。有什么问题？我该如何解决？

Answer 1

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

然后，将父li设置为position:relative，将子ul设置为position:absolute（而非li}。

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

* {
  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>

鼠标悬停时不会出现下拉列表

1 个答案: