Ally12 Ally12 - 5 months ago 14
CSS Question

Styling the borders on a BootStrap dropdown menu

I am trying to style this bootstrap dropdown menu to look like this:

enter image description here

I want all the lines to connect and then the top border of the UL just go until the intersection of the LI like so in the image.

Mine however looks like this:

enter image description here

When I hover over it, I set it to add to borders to the LI and it just does not look right or work correctly. I was messing around and trying to add a fixed width HR as the link and position it at the top of the UL until it meets the intersection but I think there might be an easier way.

Here is my code:

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


And my Hover Code:

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


How I could go about making my Goal image in a more cleaner fashion?

Answer

Here's the code you need to make the looks work, since there was no js I didn't work in the functionallity.

As a side note avoid using inline-style since it is harder to maintain and they override your css properties unless you declare !important on them.

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>