在BootStrap下拉菜单上设置边框样式

Question

我正在尝试设置此引导程序下拉菜单的样式，如下所示：

我希望所有的线都连接起来，然后UL的顶部边界一直到LI的交点为止，如图所示。

我的看起来像这样：

当我将鼠标悬停在它上面时，我将其设置为添加到LI的边框，但它看起来不正确或无法正常工作。 我四处乱逛，试图添加固定宽度的HR作为链接，并将其放置在UL的顶部，直到遇到交叉路口，但我认为这可能是一种更简单的方法。

这是我的代码：

<li class="dropdown" id="need-help-ul" style="display: inline; list-style-type: none;">
<a href="#" id="need-help-dropdown" class="dropdown-toggle" data-toggle="dropdown" 
data-hover="dropdown" data-delay="0" role="button" aria-haspopup="true" 
aria-expanded="false" style="text-decoration: none; background-color: white; 
display: inline-block; padding-right: 10px; font-size: 14px;">Need Help?</a>

<ul class="dropdown-menu" style="border-top: none;
border-left: 1px solid black; 
border-bottom:1px solid black; border-right: 1px solid black; white-space: nowrap; 
padding: 10px;">

            <li>Content</li>
            <li>Content<li>
            <li>Contentli>
            <li>Content</li>
        </ul>
   </li>

和我的悬停代码：

 #need-help-dropdown:hover { border-top: 1px solid black; border-left: 1px solid black; 
border-right: 1px solid black;  }

如何以更清洁的方式制作目标图像？

Answer 1

这是使外观正常工作所需的代码，因为没有js，我在功能上没有工作。

附带说明一下，避免使用内联样式，因为这样更难以维护，并且除非您在其上声明！important，否则它们会覆盖您的CSS属性。

JSFiddle

  .dropdown { list-style: none; display: inline-block; min-width: 300px; } .dropdown-toggle { padding: 5px; text-decoration: none; background-color: #ffffff; display: inline-block; font-size: 14px; border: 1px solid #000000; border-bottom-color: transparent; margin-bottom: -1px; } .dropdown-menu { margin: 0; list-style: none; white-space: nowrap; border: 1px solid black; padding: 10px; background-color: #ffffff; } 

 <li class="dropdown"> <a href="#" id="need-help-dropdown" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" role="button" aria-haspopup="true" aria-expanded="false">Need Help?</a> <ul class="dropdown-menu" id="need-help-ul"> <li>Content</li> <li>Content </li> <li>Content</li> <li>Content</li> </ul> </li> 

Answer 2

我已经取得了非常接近您想要的东西。 结果如下：

https://jsfiddle.net/micaww/hyjexxt8/

首先，请始终检查常规的损坏代码。 您最里面的列表项标签已损坏。 并不是说这会影响这个小片段的样式，但是绝对会影响较大页面上的代码。

我一直在内部无序列表上放置一个完整的黑色边框，并在底部带有白色边框a元素上放置相同的黑色边框。 然后，我将内容上推一个像素，以使标题的白色底边框覆盖边框的这一小部分。

<li class="dropdown" id="need-help-ul" style="display: inline; list-style-type: none;">
  <a href="#" id="need-help-dropdown" class="dropdown-toggle" data-toggle="dropdown" 
  data-hover="dropdown" data-delay="0" role="button" aria-haspopup="true" 
  aria-expanded="false" style="text-decoration: none; background-color: white; 
  border: 1px solid black; border-bottom: 1px solid #FFF;
  display: inline-block; padding: 5px 10px; font-size: 14px;">Need Help?</a>
  <ul class="dropdown-menu" style="border-top: none;
    margin-top: -1px;
    background-color: #FFF;
    border:1px solid black; white-space: nowrap; 
    padding: 10px;">
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
  </ul>
</li>

Answer 3

检查jsfiddle

我了解您希望按钮上的边框仅在悬停时显示
我将此添加到您的CSS

#need-help-dropdown { 
  border:1px solid transparent;
  padding:5px 10px;
}
ul { 
  margin-bottom:0;
  list-style:none;
  margin-top:-1px;
  box-shadow:1px 1px 4px 0px rgba(0,0,0,0.3);
  background:#fff;
}

Answer 4

您可以在下拉列表打开时更改样式：

.dropdown.open #need-help-dropdown {
  border:1px solid black;
  border-bottom:0;
  position:relative;
  z-index:1100;
  background:white;
}
.dropdown-menu {
  border-radius:0;
  padding:10px;
  border:1px solid black;
  margin-top:-1px; 
}

引导演示

Answer 5

这可能不是最性感的答案，并且可能还有我不知道的更好的技术，但是如何制作遮罩来越过边界的一部分呢？ 像这样：

• 在<ul class="dropdown-menu"...>标记中添加<div id="mask"></div>

• 给您的mask以下样式：

  #mask{ height:1px; position:absolute; top:0; left:0; width:85px; margin-top:-1px; background-color:white; }

• 将ul.dropdown-menu的样式更改为包括：

  border-radius:0; border-top:1px solid black;

到处可能还有其他一些随机的格式设置，因为我无法完全复制您看到的内容。 基本上，这个想法是创建一个遮罩，该遮罩会阻挡<ul>顶部边框的一部分。 一个问题是，如果#mask与打开菜单的按钮相同，则需要确保宽度。 如果您知道按钮的宽度，则可以使用CSS轻松完成。 如果不这样做，或者它可能会更改，则可以使用JS来同步它们两个（如果需要帮助，请告诉我）。 除此之外，您可以使用class而不是id作为mask 。

这一切有意义吗？

我在一个

jsfiddle

如果您想看看它。

Answer 6

（代表OP发布）。

非常感谢大家的答复。 我查看了您的所有答案，并通过浏览找到了解决方案。 最后，我不得不使用一些mouseover / mouseout并使用JavaScript添加/删除类，但是我可以使用它。

Answer 7

不要使用边框，而应使用阴影框。