Html 菜单列表项和上边框

我试图将上边框添加到一个菜单列表项中，该菜单项将在悬停动作时显示，但不知何故，当添加上边框时，它会使第一个菜单项（下拉）跳转

该部分的CSS如下所示：

header nav ul.sub-menu li:hover {
    border-top:4px solid; 
}

和菜单HTML

<div class="main-menu">
  <nav>
    <div class="menu-header-menu-container">
      <ul class="menu" id="menu-header-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-487" id="menu-item-487"><a href="#">Home</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-482 has-menu level1" id="menu-item-482"><a href="#our-company/">Our Company</a>
          <ul class="sub-menu">
            <div class="menu_arrow"></div>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-483" id="menu-item-483"><a href="#our-team/">Our Team</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-544" id="menu-item-544"><a href="#contact-us/">Contact Us</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-431 has-menu level1" id="menu-item-431"><a href="#our-approach/">Investment Approach</a>
          <ul class="sub-menu">
            <div class="menu_arrow"></div>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-633" id="menu-item-633"><a href="#our-process/">Our Process</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-407" id="menu-item-407"><a href="#portfolio/">Portfolio</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-653" id="menu-item-653"><a href="#news-insights/">News &amp; Insights</a></li>
      </ul>
    </div>
    <!-- .menu --> 
  </nav>
</div>

---

有什么线索吗？

您可以尝试以下CSS：

nav ul.sub-menu li {
    margin-top: 4px;
}

nav ul.sub-menu li:hover {
    margin-top: 0;
    border-top:4px solid; 
}

这会为边框添加边距占位符，因此当边框出现时，它会取代边距，不会产生移动效果

---

我通常使用透明边框作为占位符，因为边距可能与相邻边距相互作用

li {border-top:4px solid transparent;}
li:hover {border-top:4px solid black;}

---

您是否缺少边框的颜色？

不是

的有效子项；此外，IIRC将边框添加到元素的边距中，因此如果没有空间可供其增长，它将向下移动。@dotty：“缺少”边框颜色将自动使用

color

的值。还值得一提的是，您可以使用

box size:border box如果要保持固定高度。不过，在非悬停状态下，您必须使用清晰的边框或填充，而不是边距。谢谢，Cezary。也许值得作为另一个答案来回答：）好吧，两种方法都试过了，但在第一个下拉菜单上仍然得到了奇怪的效果。这里的集结地：@JackTheKnife似乎我误解了这个问题。不知道你们在说什么奇怪的效果。@碎纸机不见了，因为标记的答案解决了我的问题