title: Multiple dropdowns overlap when floated right on a Bootstrap Navbar
body: <p>With Boostrap 3.2: when using navbar-right on a two different dropdown menus, they overlap slightly.  The code below is directly from the <a href="http://getbootstrap.com/javascript/#dropdowns" rel="nofollow">Dropdown examples</a> on the Bootstrap site, modified so there are two dropdowns on the right instead of one.</p>
  
  <p>Note the JSFiddle snippet below.  Make sure the Result window is wide enough to see the navbar, and then mouse over Dropdown 3 and 4.  You'll see their borders overlap.</p>
  
  <p>Any suggestions on how to work around this?</p>
  
  <p><a href="http://jsfiddle.net/codespelunker/ysqjt7fv/2" rel="nofollow">http://jsfiddle.net/codespelunker/ysqjt7fv/2</a></p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li id="fat-menu" class="dropdown"&gt; &lt;a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown 4 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop3"&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Another action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Something else here&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Separated link&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li id="fat-menu" class="dropdown"&gt; &lt;a href="http://getbootstrap.com/javascript/#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown 3 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop3"&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Another action&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Something else here&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://twitter.com/fat"&gt;Separated link&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>