Question

我是新来的HTML和CSS新手。

我一直在尝试创建一个下拉菜单，当下拉菜单显示菜单悬停时，它也显示没有菜单悬停。只要我将光标移动到显示下拉列表的位置，就会出现。你知道我做错了什么以及我该如何纠正它？我希望我有意义......

另外，我知道当我扩展窗口大小时，菜单的宽度会扩大。请忽略它，它在我正在处理的主要代码中没有这样做。

提前致谢！

.top-menu>ul {
  background-color: #78a1bb;
  font-size: 150%;
  padding-left: 0px;
  padding-right: 0px;
}

.top-menu>ul>li {
  list-style: none;
  display: inline-block;
  padding: 5px 124px;
  position: relative;
}

.top-menu>ul>li:hover {
  background-color: #d6e2ea;
}

ul.sub-menu {
  position: absolute;
  width: 290px;
  background-color: #d6e2ea;
  list-style: none;
  padding-left: 0px;
  padding-top: 5px;
  opacity: 0;
}

ul.sub-menu li {
  font-size: 80%;
  padding-top: 10px;
  padding-left: 25px;
  padding-bottom: 10px;
}

.top-menu li:hover .sub-menu {
  opacity: 1;
  left: 0px;
}

<nav class="top-menu">
  <ul>
    <li> A
      <ul class="sub-menu">
        <li>Sub a </li>
        <li>Sub b </li>
        <li>Sub c </li>
      </ul>
    </li>
    <li> B </li>
    <li> C </li>
  </ul>
</nav>

Answer 1

而不是使用opacity隐藏您的sub-menu。您可以使用display: none隐藏，display: block再次显示。

如果你只是改变不透明度，那么元素仍然在你的鼠标下面＃34;并且CSS尝试多次显示和隐藏（您的子菜单是＆＃34;轻弹＆＃34;）。

使用display: none子菜单消失，鼠标不会徘徊＆＃34;永远＆＃34;。

我用正确的代码创建了一个plunker。 https://embed.plnkr.co/TZ7U0m19WijN0kIe6Xgl/

新手CSS：下拉菜单没有菜单悬停？

1 个答案: