Styling the borders on a BootStrap dropdown menu
<p>I am trying to style this bootstrap dropdown menu to look like this: </p>

<p><a href="https://i.stack.imgur.com/z2MR5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z2MR5.png" alt="enter image description here"></a></p>

<p>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. </p>

<p>Mine however looks like this: </p>

<p><a href="https://i.stack.imgur.com/xEsHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xEsHZ.png" alt="enter image description here"></a></p>

<p>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. </p>

<p>Here is my code: </p>

<pre><code>&lt;li class="dropdown" id="need-help-ul" style="display: inline; list-style-type: none;"&gt;
&lt;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;"&gt;Need Help?&lt;/a&gt;

&lt;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;"&gt;

            &lt;li&gt;Content&lt;/li&gt;
            &lt;li&gt;Content&lt;li&gt;
            &lt;li&gt;Contentli&gt;
            &lt;li&gt;Content&lt;/li&gt;
        &lt;/ul&gt;
   &lt;/li&gt;
</code></pre>

<p>And my Hover Code:</p>

<pre><code> #need-help-dropdown:hover { border-top: 1px solid black; border-left: 1px solid black; 
border-right: 1px solid black;  }
</code></pre>

<p>How I could go about making my Goal image in a more cleaner fashion?</p>