如何使子菜单不消失？ [英] How do I get the submenu to not disappear?

问题描述

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

I have a navigation menu on my website. It works, however when hovering over a menu item with sub-items they disappear when trying to click on them. It appears that there is a spacing issue with these items.

*此外，我试图弄清楚如何插入|。菜单项之间。如果您可以分享一些见解，那就太好了。您可能可以从我的帖子中得知，我只具备基本的编码知识。

*Additionally, I am trying to figure out how to insert a | between the menu items. If you could share some insight that would be amazing. I only have basic coding knowledge as you can probably tell from my 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>

推荐答案

如果我对您的理解正确，则需要在最顶部的导航元素上使用水平分隔符。

If I'm understanding you correctly, you want horizontal separators on your top-most navigation elements.

为此，您可以在<$ c中添加边框$ c> li 元素，然后排除最后一个元素，例如：

To do this, you can add borders to your li elements and then exclude the last one, like so:

#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

这篇关于如何使子菜单不消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！