下拉菜单不出现-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

491585

文章

251852355

访问

+关注

分类

暂无分类

日期归档

暂无数据

下拉菜单不出现

发布于2023-11-18 07:47 阅读(304) 评论(0) 点赞(7) 收藏(1)

我很困惑为什么我的下拉菜单无法出现。有人可能知道这个问题吗？感谢帮助！

我已经检查了我的下拉列表并显示它，它可以，但我无法将下拉列表设置为在鼠标悬停在链接上时显示。这是我的代码：

body {
  font-family: Verdana, Geneva, sans-serif;
  padding: 0;
  margin: 0;
}

.ic {
  font-weight: bold;
  margin-right: 5px;
  font-size: .9rem;
}

.wrap {
  background-color: black;
}

#topbar {
  padding: 0;
  width: 1200px;
  /* FOR a static width like Posh CSS */
  height: 50px;
  margin: auto;
  text-transform: uppercase;
  font-size: .8rem;
}

.nospace {
  color: white;
}

li {
  margin: 15px;
}

li.left {
  float: left;
  list-style: none;
}

li.right {
  float: right;
  list-style: none;
}

li a {
  text-decoration: none;
  color: aqua;
}

#banner {
  background: url(bg1.jpg) no-repeat center;
  height: 600px;
  background-size: 1650px;
  opacity: 0.7;
  font-family: 'Forum', cursive;
  font-size: 20px;
}

ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menubar {
  width: 1200px;
  margin: auto;
  display: block;
}

.menubar a {
  padding: 10px;
  color: black;
}

.menubar a:hover {
  background-color: white;
}

.drop-nav {
  position: relative;
}

.drop-nav:after {
  content: "\25BC";
  font-size: .5em;
  display: block;
  position: absolute;
  top: 40%;
  right: 1%;
}

#content {
  padding: 0;
  position: absolute;
  display: none;
  background-color: gray;
  min-width: 120px;
  z-index: 1;
}

#content a {
  color: blue;
  border-bottom: 2px solid black;
  text-decoration: none;
  display: block;
}

#content a:hover {
  background-color: aqua;
}

li .drop-nav a:hover {
  display: block;
}

.wrap01 {
  height: 60px;
  border-bottom: 1px solid gray;
}

<body>
  <div class="Halaman">
    <div class="wrap">
      <div id="topbar">
        <div class="nospace">
          <li class="left"><span class="ic">&#9743;</span> +00 (123) 456 7890</li>
          <li class="left"><span class="ic">&#9993;</span> info@domain.com</li>
          <li class="right"><a href="#">Tentang</a></li>
          <li class="right"><a href="#">Kontak</a></li>
          <li class="right"><a href="#">Login</a></li>
          <li class="right"><a href="#">Register</a></li>
          <li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="wrap01">
        <nav class="menubar">
          <li class="left">Sistem Pemberkasan Gudang</li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a class="drop-nav" href="#">Dropdown</a>
            <ul id="content">
              <a href="#">zero 1</a>
              <a href="#">zero 1</a>
            </ul>
          </li>
          <li class="right"><a class="drop-nav" href="#">Halaman</a></li>
          <li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
        </nav>
      </div>
</body>

展开片段

我在互联网和 W3C 上做了一些研究，但仍然找不到答案。

解决方案

您的选择器有误li .drop-nav a:hover

您需要设置#content才能再次显示。使用display: none会阻止你使用过渡，所以我使用了visibility&height属性。

您可以在下面查看。

body {
  font-family: Verdana, Geneva, sans-serif;
  padding: 0;
  margin: 0;
}

.ic {
  font-weight: bold;
  margin-right: 5px;
  font-size: .9rem;
}

.wrap {
  background-color: black;
}

#topbar {
  padding: 0;
  width: 1200px;
  /* FOR a static width like Posh CSS */
  height: 50px;
  margin: auto;
  text-transform: uppercase;
  font-size: .8rem;
}

.nospace {
  color: white;
}

li {
  margin: 15px;
}

li.left {
  float: left;
  list-style: none;
}

li.right {
  float: right;
  list-style: none;
}

li a {
  text-decoration: none;
  color: aqua;
}

#banner {
  background: url(bg1.jpg) no-repeat center;
  height: 600px;
  background-size: 1650px;
  opacity: 0.7;
  font-family: 'Forum', cursive;
  font-size: 20px;
}

ul li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

nav li {
  position: relative;
}

.menubar {
  width: 1200px;
  margin: auto;
  display: block;
}

.menubar a {
  padding: 10px;
  color: black;
}

.menubar a:hover {
  background-color: white;
}

.drop-nav {
  position: relative;
}

.drop-nav:after {
  content: "\25BC";
  font-size: .5em;
  display: block;
  position: absolute;
  top: 40%;
  right: 1%;
}

#content {
  padding: 0;
  visibility: hidden;
  height: 0px;
  background-color: gray;
  z-index: 1;
}

#content a {
  color: blue;
  border-bottom: 2px solid black;
  text-decoration: none;
  display: block;
}

#content a:hover {
  background-color: aqua;
}

li:hover ul#content {
  display: block;
  position: absolute;
  top: 25px;
  left: 0px;
  height: 200px;
  width: 120px;
  visibility: visible;
}

.wrap01 {
  height: 60px;
  border-bottom: 1px solid gray;
}

<body>
  <div class="Halaman">
    <div class="wrap">
      <div id="topbar">
        <div class="nospace">
          <li class="left"><span class="ic">&#9743;</span> +00 (123) 456 7890</li>
          <li class="left"><span class="ic">&#9993;</span> info@domain.com</li>
          <li class="right"><a href="#">Tentang</a></li>
          <li class="right"><a href="#">Kontak</a></li>
          <li class="right"><a href="#">Login</a></li>
          <li class="right"><a href="#">Register</a></li>
          <li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="wrap01">
        <nav class="menubar">
          <li class="left">Sistem Pemberkasan Gudang</li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a href="#">Link Text</a></li>
          <li class="right"><a class="drop-nav" href="#">Dropdown</a>
            <ul id="content">
              <a href="#">zero 1</a>
              <a href="#">zero 1</a>
            </ul>
          </li>
          <li class="right"><a class="drop-nav" href="#">Halaman</a></li>
          <li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
        </nav>
      </div>
</body>