Drop down menu 引导阴影下拉菜单

我想做的是，同时有一个像图1一样的阴影 放在图2中。箭头表示阴影应显示的位置。 但是，我找不到任何代码片段将阴影放置在导航栏的正下方 ，当显示下拉菜单时。也许你能帮我

第一张图片：

---

第二张图片：

您可以在导航栏下添加一个div，并给它一个页边距top-x px，如下所示：

    .gradient{
         background: #6393c1; /* Old browsers */
         background: -moz-linear-gradient(top,  #6393c1 1%, #cfe7fa 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6393c1), color-stop(100%,#cfe7fa)); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  #6393c1 1%,#cfe7fa 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  #6393c1 1%,#cfe7fa 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  #6393c1 1%,#cfe7fa 100%); /* IE10+ */
         background: linear-gradient(to bottom,  #6393c1 1%,#cfe7fa 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 ); /* IE6-9 */
         height:20px;
         margin-top:-20px;
     }

，可以使用名为的工具创建渐变。然后定义高度并将其与导航栏对齐。希望这对你有足够的帮助，如果没有，请自由提问

编辑、删除以前的代码 我为你重新做了一件靴子。你可以找到它。基本上我所做的就是在导航栏下面添加渐变。给它一个与导航栏高度相等的顶部边距。然后覆盖bootstrap类下拉菜单，如下所示，边距顶部等于渐变的高度。我希望这就是你需要的

.navbar-nav>li>.dropdown-menu{
    margin-top:20px !important;
}

编辑2： 好的，我想我现在拿到了。看一看。如果在桌面设备上不需要渐变，可以使用“显示无”隐藏渐变，然后添加媒体查询“显示块”。但这取决于你

    @media screen and (max-width: 768px) {
    .navbar-collapse{
        position:absolute;
        background:#222;
        width:100%;
        top:70px;
    }
}

---

正如你所说，我添加了一个梯度，它的工作方式与你的例子相同。然而，这并不是我想要的。我想要的是导航栏和下拉菜单之间的阴影（导航栏折叠时出现的阴影）。但是如果我使用你的代码示例，阴影会消失在下拉菜单后面，我再也看不到它了。我的意思还有一个例子：对不起，你又误解了。您使用错误的下拉菜单制作了一个示例。我为你的例子做了两个截图：如果你缩小窗口，这个按钮就会出现；如果你点击它，就会出现一个下拉菜单，但在这个下拉菜单中，我们以前的“导航栏”下方没有阴影。我希望这有助于理解。你能对答案进行投票并将其标记为解决方案吗？不幸的是，我不能投票，因为我没有足够的声誉：-（你最终可以：）