菜单列表项和顶部边框答案

【问题标题】：Menu list item and top border菜单列表项和顶部边框
【发布时间】：2014-04-30 21:02:42
【问题描述】：

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

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

有什么线索吗？

【问题讨论】：

您是否缺少边框的颜色？
<div> 不是<ul> 的有效子代； IIRC 还为元素的边距添加了一个边框，因此如果没有空间让其增长，它将向下移动。
@dotty：“缺失”边框颜色将自动使用color 的值。

标签： html css

【解决方案1】：

我一般使用透明边框作为占位符，只是因为边距可能会与相邻的边距交互。

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

【讨论】：

【解决方案2】：

你可以试试这样的 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/

【讨论】：

另外值得一提的是，如果要保持固定高度，可以使用box-sizing: border-box;。但是，在非悬停状态下，您必须使用清晰的边框或填充而不是边距。
谢谢，Cezary。可能值得作为另一个答案:)
好吧，两者都试过了，但在第一个下拉菜单上仍然会出现奇怪的效果。暂存站点：interactstaging.us/rockspringcapital
@JackTheKnife 好像我误解了这个问题。不知道你说的是什么奇怪的效果。
@Shredder 消失了，因为标记的答案解决了我的问题