My issue is illustrated in the screenshots below:
first-dropdown:
second-dropdown:
The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same.
HTML code:
<div class="row menu">
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
My reports
<span class="caret my-reports-caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Performance", performance_reports_path %></li>
<li class="divider"></li>
<li><%= link_to "Account settings", '#' %></li>
</ul>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
My account
<span class="caret my-account-caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "My website", websites_path %></li>
<li class="divider"></li>
<li><%= link_to "Account settings", edit_user_registration_path(current_user) %></li>
</ul>
</li>
</ul>
</div>
CSS styles:
.menu{
width:940px;
height: 30px;
border-width:1px;
border-top-style:solid;
border-bottom-style:solid;
border-color: grey;
padding:10px;
background-color: rgb(212,229,190);
}
.row .nav-pills
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 245px;
padding: 0;
margin: 0;
list-style: none;
rgb(180, 210, 135)
background-color: #ffffff;
border-width:0 1px 1px 1px;
border-color:rgb(180, 210, 135);
-webkit-box-shadow: 0 5px 10px rgba(180, 210, 135, 0.2);
-moz-box-shadow: 0 5px 10px rgba(180, 210, 135, 0.2);
box-shadow: 0 5px 10px rgba(180, 210, 135, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
Additional CSS for links:
.menu .nav-pills
.dropdown-menu a {
display: block;
padding-top: 5px;
padding-left: 10px;
clear: both;
font-weight: normal;
line-height: 18px;
color: black;
white-space: nowrap;
}
.menu .nav-pills .dropdown-toggle {
border: 1px solid #B4D287;
background-color: white;
margin-bottom: 0px;
}