下拉菜单没有出现

时间：2018-07-05 03:46:39

标签： html css

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

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

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>

我已经在Internet和W3C上进行了一些研究，但仍然找不到答案。

2 个答案:

答案 0 :(得分：1)

您在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>

答案 1 :(得分：0)

您function my_theme_infinite_scroll_settings( $args ) { if ( is_array( $args ) && is_shop() ) $args['posts_per_page'] = 20; return $args; } add_filter( 'infinite_scroll_settings', 'my_theme_infinite_scroll_settings' ); 是display:none，所以在您的CSS中，当您将鼠标悬停时，它应该是

#content

相关问题
最新问题