在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

不要使用邊框，而應使用陰影框。