如何让子菜单不消失？

Question

我的网站上有一个导航菜单。它可以工作，但是当将鼠标悬停在带有子项的菜单项上时，它们会在尝试单击它们时消失。这些项目似乎存在间距问题。

*此外，我正在尝试弄清楚如何插入 |菜单项之间。如果你能分享一些见解，那将是惊人的。我只有基本的编码知识，您可能可以从我的 post.

中看出这一点

非常感谢您的帮助！

/* do not change */

.container {
  overflow: unset;
}

#container ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  display: inline-block;
}

#container ul li ul li {
  display: none;
}


/* can change */

#container {
  text-align: center;
}

#container ul li {
  width: 130px;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  margin: 5px;
  border-radius: 0px;
}

#container ul li a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  display: block;
}

#container ul li a:hover {
  text-decoration: none;
  border-radius: 0px;
  color: #1dcdfe;
}

#container ul li:hover ul li {
  background-color: white;
  display: block;
  margin-left: 0px;
}

<div id="container">
  <ul>
    <li><a href='#scroll-home'>Home</a></li>
    <li><a href='#'>About Us</a>
      <ul>
        <li><a href='#scroll-whyhere'>Why You're Here</a></li>
        <li><a href='#scroll-ourmethod'>Our Method</a></li>
        <li><a href='#scroll-whyus'>Why Choose US</a></li>
        <li><a href='#scroll-testimonials'>Testimonials</a></li>
      </ul>
    </li>
    <li><a href='#'>Our Services</a>
      <ul>
        <li><a href='#scroll-wetreat'>What We Treat</a></li>
        <li><a href='#scroll-packages'>Packages & Pricing</a></li>
      </ul>
    </li>
    <li><a href='#scroll-faq'>FAQs</a></li>
    <li><a href='#'>Contact Us</a></li>
  </ul>
</div>

Answer 1

以下代码在菜单

之间添加管道

#container > ul > li {
    border-right: 1px solid black;
}
#container > ul > li:last-child {
    border-right: 0;
}

Answer 2

那是因为你在这里给了每个 li 一个特定的高度：

#container ul li {
  width: 130px;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  margin: 5px;
  border-radius: 0px;
}

它不会让盒子在悬停时变大。您可以为具有悬停选项的导航按钮指定一个 id，并提供以下代码：

#container ul li #drop_down{
  height: 100%;
}

为了避免以后的混乱，如果你想select直接children，使用>，像这样：

#container > ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  display: inline-block;
}

这里你没用过，所以连里面的ul也有这些属性，毁了它。如果您将其更改为上面的代码，它将得到修复。为什么？因为内部 ul 在您的代码中有 display: inline-block; 属性，这不应该是。

此外，尝试给盒子一个 background-color 和一个 z-index，这样它就不会一直检测悬停在盒子后面，在这种情况下是接触按钮。

关于你的其他问题，我建议你参考这个 link： How to make a vertical line in HTML

并且，或者： https://medium.com/@hollybourneville/creating-border-lines-using-pseudo-elements-in-css-a460396299e8

Answer 3

如果我没理解错的话，你需要在 top-most 导航元素上使用水平分隔符。

为此，您可以为 li 元素添加边框，然后排除最后一个元素，如下所示：

#container ul li {
  // ... other styles here
  border-right: 1px solid black;
}

/* Add this additional style so that the last item doesn't receive the border */
#container ul li:last-child {
  border-right: none;
}

可在 https://codepen.io/BrandonClapp/pen/wvGqrmQ

找到工作示例

如何让子菜单不消失？

How do I get the submenu to not disappear?

html

css

header

drop-down-menu