时间戳

首页 > 解决方案 > 悬停时 CSS 菜单不下拉

html - 悬停时 CSS 菜单不下拉

问题描述

我的博客的下拉菜单有问题。当我将鼠标悬停在“Plamo 评论”上时，它不会下拉子菜单。我阅读了一些与此相关的文章，但仍然找不到任何解决方案。我认为我在 CSS 上做错了什么。

有人可以帮我吗？我会很感激任何帮助。先感谢您！

nav.fixnavbar {
  position: relative;
  display: block;
  width: 100%;
  background: #778595;
  z-index: 99;
  padding: 0;
  margin-bottom: 0;
  font-size: 0;
  opacity: 1;
}

.fixednav {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1010px;
}

.fixednav li {
  display: inline-block;
  position: relative;
}

.fixednav li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.fixednav li a:hover {
  background: #6c7a89;
  color: #fff;
}

.nav-icon {
  display: none;
}

nav.fixnavbar.main-nav-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.97;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sub-menu li {
  display: none;
}

.fixednav li {
  position: relative;
}

.sub-menu {
  display: none;
  position: absolute;
}

.fixednav li:hover .sub-menu {
  display: block;
}
<nav class='fixnavbar'>
  <ul class='fixednav' id='togglemenu'>
    <li><a href='/'>Home</a></li>
    <li><a href='/search/label/list'>List bài viết</a></li>
    <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
    <li><a href='/search/label/review'>Plamo Reviews</a>
      <ul class="sub-menu">
        <li><a href="#">No1</a></li>
        <li><a href="#">No2</a></li>
      </ul>
    </li>
    <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars' /></li>
  </ul>
</nav>

标签： htmlcssdrop-down-menublogger

解决方案

为了实现你想要的行为，你可能应该改变两件事：

  1. 您可以摆脱为子菜单li元素赋予值的 CSS 规则，display: none因为它是不必要的。如果父级.sub-menu设置为，display: none那么子级将自动继承它。

  2. 您已将您的设置.sub-menu为 be position: absolute，但您没有指定任何额外的 CSS 规则来指示它应该相对于其父级的位置。因此，例如，您可以尝试使您的.sub-menu规则如下所示：

.sub-menu {
  display: none;
  position: absolute;
  top: 75px;
  background: #ccc;
}

这样，您的意思是您的菜单应位于其父级下方 75 像素处。这background只是为了让您的子菜单在您的应用程序的其余部分可见（当然，您可以将其修改为您喜欢的任何内容）。

推荐阅读