Question

这不是一个新问题 - 当您将鼠标悬停在下拉菜单上时，它会消失。我搜索了很多主题，我知道了孩子和兄弟选择器，但我仍然无法在我的代码中找到我的错误。

这是我的代码和演示：

.navbar ul {
position: relative;
float: left;
}

.navbar ul > li {
 display: inline-block;
 margin: 0 28px 0 0;
vertical-align:top;
}

.navbar ul > li > a {
  display: block;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
}

.navbar ul > li > a:after {
    content: "|";
    padding: 0 0 0 28px;
    color: #000;
    font-size: 17px;
}

.navbar ul > li:last-child a:after {
    content: "";
}

/* DROPDOWN LIST */

    .navbar ul ul {
    position: absolute;
      margin: 19px 0 0 0;
      padding: 0;
      top: 100%;
      left: 0;
      right: 0;
      width: 100%;
      height: 355px;
      background-color: #00e1f5;
    }

jsfiddle

有什么建议吗？

Answer 1

您提到的问题是因为您的下拉列表与li之间的差距为19px。

将其删除并向导航栏添加填充＆gt; ul＆gt;李修理它。

.navbar > ul {
    position: relative;
    float: left;
    margin: 0;
}
.navbar > ul > li {
  display: inline-block;
  margin: 0 28px 0 0;
  padding: 19px 0;
  vertical-align:top;
}
.navbar ul > li > ul {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: 355px;
    background-color: #00e1f5;
}

JSFiddle

是的三角形不再存在了。我实际上并没有尝试修复它，因为这个菜单有很多严重的问题，我认为你需要重新考虑整个结构。

下拉菜单没有重点

1 个答案: