Aligning a dropdown menu in CSS in all browsers - html

Question

I have a dropdown menu that is generated from WordPress so I do not want to change the HTML of it. i can change the CSS as needed though and I pretty much have ot working as I need it with the exception of an alignment issue with my dropdown menu.
Google Chrome
FireFox
Internet Explorer
From the images above you can see that IE and FIreFox display it the same but Chrome is always different from the 2. My Goal is to get this box to align perfectly with the right of the menu button and then get it to look that way in all 3 of these browsers.
I have extracted the HTML and CSS into a JSFiddle page for testing and playing around with here...
Code View: http://jsfiddle.net/jasondavis/hAb4k/
Full View for viewing the menu: http://jsfiddle.net/jasondavis/hAb4k/embedded/result/
My HTML
<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul id="nav" class="nav nav-pills">
<li class="active menu-home">
Home
</li>
<li class="menu-about">
About
</li>
<li class="menu-projects">
Projects
</li>
<li class="menu-blog">
Blog
</li>
<li class="dropdown menu-services">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-consulting">Consulting</li>
<li class="menu-magento-development">
Magento Development
</li>
<li class="menu-wordpress-development">
WordPress Development
</li>
<li class="menu-sugarcrm-development">
SugarCRM Development
</li>
<li class="menu-web-development">
Web Development
</li>
<li class="menu-seo">
SEO
</li>
</ul>
</li>
<li class="menu-contact">
Contact
</li>
</ul>
</nav>
CSS
body{
background: #40C8F4 !important;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}
#head-nav-menu{
float: right;
margin-top: 29px;
}
#head-nav-menu li {
float: left;
position: relative;
padding: 0 2px 0 2px;
}
.nav a {
font-family: 'arial';
font-size: 18px;
padding: 8px 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: nowrap;
color: #fff;
opacity: 0.9;
letter-spacing: 1px;
text-decoration: none;
}
.menu-contact a {
border: 2px solid #FFF;
padding: 8px 18px;
transition: 0.05s linear;
-moz-transition: 0.05s linear;
-webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
background-color: #FFF;
color: #797979;
}
#nav ul a {
font-weight: 100;
}
.nav a:hover,
.nav > .active a {
opacity: 1;
background-color: #3DBCE6;
}
.nav > .active li a {
background-color: inherit;
}
.tinynav {
display: none;
width: 100%;
margin-top: .5em;
margin-bottom: .6em;
}
.nav li.button a {
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid #FFF;
border-radius: 4px;
margin-top: 5px;
padding: 8px 18px;
font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
font-weight: normal;
margin-left: 16px;
color: #FFF !important;
}
.nav li.button a:hover {
background-color: #FFF;
opacity: 1;
color: #444 !important;
}
/* ==========================================================================
Main Container General Layout Styles
========================================================================== */
.header-container header {
padding-top: 13px;
padding-bottom: 18px;
}
/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
display: none;
padding: 0;
position: absolute;
z-index: 99999;
border: 1px solid #86DEFC;
width: 333%;
/*right: 8px;*/
left: -239%;
top: 23px;
background-color: #F2F9FC;
}
#nav .dropdown-menu li {
width: 195px;
float: left;
display: inline-block;
/*width: 50%;*/
}
.nav .dropdown-menu a {
color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
display: inline-block;
-webkit-animation: fadeDown 250ms ease;
-moz-animation: fadeDown 250ms ease;
-ms-animation: fadeDown 250ms ease;
-o-animation: fadeDown 250ms ease;
animation: fadeDown 250ms ease;
background-color: #fff;
color: #000;
border: 1px solid #E9E9E9;
border-top: none;
}
#nav .dropdown-menu ul,
#nav .children ul {
left: 99.75%;
top: -1px;
}
#nav ul li,
#nav ul ul li {
margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
border-top: none;
}
#nav ul a,
#nav ul ul a {
font-size: 14px;
line-height: 21px;
text-align: left;
padding: 10px;
display: inline-block;
min-width: 125px;
border-bottom: none;
margin-bottom: 0 !important;
width: 100%;
letter-spacing: 1px;
font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
color: #098EB9 !important;
background: none;
}
#nav ul ul.dropdown-menu a:hover {
width: 100%;
color: #63E924 !important;
border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
color: #000;
font-weight: 700;
}
#nav ul li.current-menu-item a {
color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
background: #fff;
color: #000;
opacity: 1;
border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
opacity: 1;
background-color: #fff;
}
#nav .dropdown-menu li:hover {
background: #F8F8F8;
}

Answer 1

Give display: block to .nav a
then remove left: 239% of #nav .dropdown-menu and give right: 2px and top: 38px to it.
Here is the edited demo for it.
http://jsfiddle.net/hAb4k/3/