Ally12 Ally12 - 5 months ago 52
CSS Question

Styling the borders on a BootStrap dropdown menu [SOLVED]

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


Do any CSS masters have an idea on how I could go about making my Goal image in a more cleaner fashion?

Please let me know! Thanks!

EDIT: 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!

Thanks all!

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>