Styling the borders on a BootStrap dropdown menu

Question

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

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:

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 1

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> 

Answer 2

I have achieved something very close to what you're looking for. Here is the result:

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

First of all, always check for general broken code. Your most inner list item tags are broken. Not that this affects the styling on this small snippet, but it will most definitely affect your code on a larger page.

I put a full black border all the way around on the inner unordered list, and the same on the a element with a white border on the bottom. Then I pushed the content one pixel up, so that the white bottom border of the title is covering that little section of border.

<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

check jsfiddle

i understand that you want the borders on the button to appear only on hover
i added this to your 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

You can change your styles just when the dropdown is open:

.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

This may not be the sexiest answer and there may be a better technique out there that I don't know about, but what about creating a mask to go over part of the border? Something like this:

• Add a <div id="mask"></div> in your <ul class="dropdown-menu"...> tag

• Give your mask the following style:

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

• Change the style of ul.dropdown-menu to include:

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

There may be some other random pieces of formatting here and there, because I wasn't able to replicate exactly what you are seeing. Basically, the idea is to create a mask that blocks part of the top border of your <ul> . One issue with this is you will need to make sure the width if #mask is the same as the button that opens the menu. This can be done easily with css if you know the width of the button. If you do not, or it may change, you could use JS to sync the two of them (let me know if you need help with that). Other than that, you could use classes instead of an id for the mask .

Does that all make sense?

I created it all in a

jsfiddle

if you want to take a look at it.

Answer 6

(Posted on behalf of the OP).

Thank you all so much for the responses. I looked at all of your answers and was able to come to a solution by looking through them. In the end, I had to use a little of mouseover/mouseout and add/remove class with JavaScript but I got it to work.

Answer 7

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