如何将内容块向下推送 2 像素

Question

我有一个 <ul> 块，其中包含构成子菜单的 <li> 列表。当您将鼠标悬停在主菜单栏（下面的 link 页）上时，绿色 border-top 栏太高了 2 个像素，我无法弄清楚如何将其向下移动以准确覆盖顶部的蓝色栏页面 body 部分。

无论如何，非常感谢您的建议。谢谢

附加注意事项： 我尝试了很多样式来将块向下推 2 个像素，但我尝试过的那些最终打破了 sub-menu 悬停导航的流程，导致 sub-menu 在悬停时消失。

Answer 1

如果我没有正确理解你的问题，那么你就是在谈论将子菜单向下移动 2 像素。如果是这样，请尝试遵循 css 代码

CSS

.nav-menu {
    float:left;
    height:60px;
}

Answer 2

nav#site-navigation ul.sub-menu {
  margin-top: 2px;
  border-top: 10px solid #a4c74c;
  z-index: 1;
}

Answer 3

向您的主菜单添加 clearfix div #menu-main-menu:after { content: ''; clear: both; display: table; }
将菜单项从顶部推入 2px： #menu-main-menu > .menu-item { margin-top: 2px;}
去喝啤酒

Answer 4

第一个和最后一个下拉菜单有

nav#site-navigation ul.sub-menu{z-index: 1;}

中间一个：

 ul#menu-main-menu li.menu-item-has-children.pulldown-button ul.sub-menu{z-index:3;}

这就是为什么你的菜单是 "disappearing"。

How to Push Content Block Down 2-Pixels