标题菜单 CSS 问题答案

【问题标题】：Header Menu CSS Issues标题菜单 CSS 问题
【发布时间】：2015-06-16 04:53:09
【问题描述】：

我在 techprosecurity.com 上遇到了两个 CSS 问题，我一直很难弄清楚如何修复。当您将鼠标悬停在当前未选择为活动链接的任何链接上时，标题中的 NAV 菜单有一个小空间。我已经搜索了可以在不破坏菜单外观的情况下删除该间距的任何属性，但不幸的是没有成功。

示例：

我的第二个问题是，在移动设备上，导航栏上的子菜单链接最终隐藏在主滑块图像后面，并且需要用户滚动菜单才能查看和单击任何子菜单链接。我曾尝试更改许多样式的 Z-Index，但无法将其置于图像上方。但是，它正在 ipad 和其他可能链接实际位于图像上方的平板电脑上工作。

移动设备示例：''/Screen%20Shot%202015-06-15%20at%202.01.06%20PM.png

平板电脑上的示例：''/Screen%20Shot%202015-06-15%20at%202.01.22%20PM.png

如果有人能提供帮助，那就太棒了！

【问题讨论】：

任何代码？没有图片..
@AwRak - 他有照片，只是没有代码。
@Th Dro - 你能发布代码吗？看图片，似乎错位可能是由“向上”箭头引起的，但在没有任何代码的情况下很难帮助您修复它
我看到了问题。当提到向上的蓝色小箭头时，您的目标是什么？该箭头是否应该只显示在活动导航按钮上？
我没有发布代码，因为该网站有很多事情要做。如果您访问 techprosecurity.com 网站并查看菜单，您将能够检查元素以查看样式问题。如果我一定要发布代码，我可以复制它并编辑我的 OP。

标签： jquery html css responsive-design

【解决方案1】：

.menu ul>li>a {
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  padding: 10px 15px;
  overflow: hidden;
  border-bottom: 3px solid transparent; <-- REMOVE THIS
}

移除底部边框

第二个问题：这是一个引导问题：

.navbar-collapse.in {
  overflow-y: auto; <-- CHANGE TO INHERIT
}

【讨论】：

他需要“透明”部分来显示他的蓝色小箭头。
谢谢，这适用于链接下的空间以及@AdamBuchananSmith 在您的评论下方提到的内容。现在我只需要了解 z-index 出现问题的原因。有时只需要第二双眼睛就能捕捉到冲突！
我想我能够找出为什么当您将鼠标悬停在所选菜单项下时它仍在添加边框。看起来在 CSS 中，LI 和 a:hover 中添加了一个边框，因此它将两次添加到当前选定的项目，然后再次处于悬停状态。

【解决方案2】：

在未选中的链接底部添加一些额外的填充，我认为padding-bottom: 34px; 会为您完成，目前空间来自仅显示在所选链接上的小蓝色箭头，所以补偿未选中链接底部的一些额外填充。

【讨论】：

我注意到，即使我添加了这个，当鼠标离开链接时，我仍然会得到一点跳跃效果。我现在正在检查 :active 和 :hover 状态，看看我能找到什么。
如果它向下跳，则删除 1px 的填充，如果它向上跳，则添加 1px。我放了一个近似值。大小作为您的起点。
尺寸很好，但是当您释放悬停时，您会看到跳跃。如果您正在查看链接并将鼠标悬停在它上面，它可以正常工作，但是当您将鼠标移开时，您会看到我所指的跳跃。
@The Dro 你想保持透明度，不要像上面的答案那样删除它，而是像这样广告 34px 的填充 .menu-link .main-menu-link {padding-bottom: 34px;}
没有透明度把一切都搞砸了。