Bootstrap 导航菜单悬停下拉问题

Question

以下是我想要实现的navbar PSD截图：

首先，当我将鼠标悬停在其上时，会显示我的导航栏下拉菜单。

我有以下JS：

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});

Here's an example on bootply

现在，当我导航到主菜单项下拉列表中的链接时，主菜单项没有应用样式（颜色和边框）。

有什么想法吗？

另外，对于在 PSD 中实现所需的导航栏下拉菜单有什么想法吗？这是下拉列表顶部边框和主菜单底部边框的问题。

我尝试使用以下代码将其制作为 PSD 中的代码。但没有运气。

#myNavbar ul li.dropdown a:hover, 
#myNavbar ul li.dropdown a:active {
  border-bottom-color: #fff;
  background: #fff;
  z-index: 1001;
  position: static;
}

想法？

Answer 1

您实现边框的方式存在许多逻辑问题。有些有更具体的选择器，有些没有覆盖键样式。最后，您缺少一些样式。

Fork on Bootply

从这些样式中移除边框属性：

#myNavbar ul li a {
    font-size: 16px;
    color: #434343;
    padding-left: 20px;
    font-weight: 600;
    border:1px solid #fff;
}
#myNavbar ul li a:hover, #myNavbar ul li a:active, #myNavbar ul li a:focus {
    background: #fff;
    color: #ffba00;
    position: static;
    z-index: 1001;
    border: 1px solid #d6d6d6;
}

此外，为了更好地匹配您的图形，您需要向.dropdown-menu 添加一些填充，如下所示：

#myNavbar .dropdown-menu {
    z-index: 999;
    position: absolute;
    margin-top: -1px;
    background: #fff;
    padding:20px;
}

然后，通过上述调整，您会遇到:hover 的问题，因为a:hover 上的样式属性border:0 导致“跳跃”效果

因此，请删除以下 CSS 类中的 border-***: 0 属性：

#myNavbar .dropdown-menu li a:hover {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #ffba00;
    border-bottom: 1px dotted #d6d6d6 !important;
}

还有一件事要与图片匹配，您需要删除下拉菜单中最后一个链接元素的边框。您可以使用:last-child CSS 选择器执行此操作，以检测下拉列表中的最后一个列表元素并将特殊样式应用于其子链接标记：

#myNavbar .dropdown-menu li:last-child a {
  border:none !important;
}