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我在功能方面没有工作。

作为旁注，请避免使用内联样式，因为它更难维护，并且它们会覆盖您的css属性，除非您在它们上声明！important。

JSFiddle

＆＃13;

 .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;
 }

＆＃13;

<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>

＆＃13;

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; 
}

Bootply Demo

Answer 5

这可能不是最性感的答案，可能有一种我不了解的更好的技术，但是创建一个面具来覆盖部分边界呢？像这样：

在<div id="mask"></div>标记

<ul class="dropdown-menu"...>

为您的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同步他们两个（如果你需要帮助，请告诉我）。除此之外，您可以使用类而不是mask的ID。

这一切都有意义吗？

我在

中创建了所有内容

jsfiddle

如果你想看看它。

Answer 6

（代表OP发布）。

非常感谢你的回复。我看了你所有的答案，并通过浏览它们来找到解决方案。最后，我不得不使用一些mouseover / mouseout并使用JavaScript添加/删除类，但我让它工作。

Answer 7

不要使用边框，而是使用box-shadow插图。

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

7 个答案: