Bootstrap Nav Menu悬停下拉列表问题

Question

以下是我想要实现的导航栏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

从这些样式中删除border属性：

#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导致“跳跃”问题的问题。效果，因为border:0

上的样式属性a:hover

因此，请删除以下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;
}