Multiple dropdowns overlap when floated right on a Bootstrap Navbar - css

Question

With Boostrap 3.2: when using navbar-right on a two different dropdown menus, they overlap slightly. The code below is directly from the Dropdown examples on the Bootstrap site, modified so there are two dropdowns on the right instead of one.
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.
Any suggestions on how to work around this?
http://jsfiddle.net/codespelunker/ysqjt7fv/2
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>

Answer 1

Ha so the issue was a small one. But the problem is when you are declaring your 2nd navbar-right div.
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 4 <span class="caret"></span>
// This one was for dropdown 4
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
.
</ul> <-------------------------------------- here
<ul class="nav navbar-nav navbar-right"> <--- is the problem
//This one was for dropdown 3
<li id="fat-menu" class="dropdown"> Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
</ul>
</li>
</ul>
Take out those two lines and you should have them not over lap AND in the right order
Check out the fiddle
The issue was that you were having them both being pushed to the right as separate divs. Instead of having one div push them to the right.

Answer 2

You can add this style
#navbar-example .navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
http://jsfiddle.net/ysqjt7fv/5/