Question

正在使用html / css中的导航栏，并且未显示下拉列表。我一直在玩代码但似乎没什么用。一旦我从.dropdown-content类中删除了 display：none ，它似乎就出现了......

有人可以看看吗？我已经花了几个小时阅读这个问题上的每一个帖子，但无法理解。 Thx提前！

以下是我的css和html片段：

body {
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
  background-size: cover;
}

#navdiv {
  opacity: 0.70;
  filter: (opacity=70;
  )
}

#navdiv ul {
  list-style-type: none;
  width: 100%;
  background: white;
  line-height: 3rem;
  float: right;
  overflow: hidden;
}

#navdiv ul a {
  text-decoration: none;
  color: black;
  padding: 2em;
}

#navdiv ul li {
  float: right;
  margin-right: 1em;
}

#logo {
  float: left !important;
  font-size: 2em;
  margin-left: 1em;
}

#navdiv ul #logo:hover {
  background: none;
}

#navdiv ul li a:hover,
dropdown:hover #dropbtn {
  background: #B266FF;
  transition: all 0.8s;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

<body>

  <div id="maindiv">
    <div id="navdiv">
      <ul>
        <li id="logo">Potayto-Potatoh</li>
        <li class="dropdown"><a href="#about">About</a></li>
        <li><a href="#portfolio" id="dropbtn">Portfolio</a>
          <div class="dropdown-content">
            <a href="#">work 1</a>
            <a href="#">work 2</a>
            <a href="#">work 3</a>
          </div>
        </li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

</body>

Answer 1

您需要为投资组合li添加下拉列表，而不是因为它没有下拉内容

<强> Demo

<强> HTML：

  <li  class="dropdown"><a href="#portfolio" id="dropbtn">Portfolio</a>

Answer 2

dropdown-content div不在dropdown div下，父<li>元素缺少下拉类规范。

Answer 3

将触发器类添加到li元素。你的CSS对于触发器也是不正确的，你提到.dropdown（这实际上是关于“约”的li的一个类！）

有关工作示例，请参阅https://jsfiddle.net/qxjbtot1/。

Answer 4

＆＃13;

body {
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=05e92845cd4b48607787e676d0d7d2e5");
  background-size: cover;
}

#navdiv {
  opacity: 0.70;
  filter: (opacity=70;
  )
}

#navdiv ul {
  list-style-type: none;
  width: 100%;
  background: white;
  line-height: 3rem;
  float: right;
}

#navdiv ul a {
  text-decoration: none;
  color: black;
  padding: 2em;
}

#navdiv ul li {
  float: right;
  margin-right: 1em;
}

#logo {
  float: left !important;
  font-size: 2em;
  margin-left: 1em;
}

#navdiv ul #logo:hover {
  background: none;
}

#navdiv ul li a:hover,
dropdown:hover #dropbtn {
  background: #B266FF;
  transition: all 0.8s;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

li:hover div.dropdown-content {
  display: block;
}

＆＃13;

<body>

  <div id="maindiv">
    <div id="navdiv">
      <ul>
        <li id="logo">Potayto-Potatoh</li>
        <li class="dropdown"><a href="#about">About</a></li>
        <li><a href="#portfolio" id="dropbtn">Portfolio</a>
          <div class="dropdown-content">
            <a href="#">work 1</a>
            <a href="#">work 2</a>
            <a href="#">work 3</a>
          </div>
        </li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>

</body>

＆＃13;

html / css下拉列表没有出现

4 个答案: