Question

我正在尝试将顶部边框添加到菜单列表项目中，该项目将显示在悬停操作上，但不知何故，它会使第一个菜单项（下拉列表）在添加顶部栏时“跳转”。

该部分的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>

有任何线索吗？

Answer 1

您可以尝试这样的CSS：

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

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

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

http://jsfiddle.net/7SGNd/1/

Answer 2

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

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

菜单列表项和顶部边框

2 个答案: