Dropdown Menu shifted to the right - css

Question

I have a dropdown menu that is working well except for one minor bug that I cannot solve.
The first dropdown menu item appears normally. However, the second dropdown menu item is shifted slightly to the right. I am guessing that the margin-right that I set to the link caused the dropdown menu to shift slightly to the right. If that is the case, what can I do to go around the problem?
It's a simple nav menu that sets the position of the dropmenu item to absolute, and is hidden by the parent element's overflow:hidden feature. On hover, the dropdown menu is brought into view with overflow:visible.
The live site is here -> nav menu
CSS
#mainMenu {
position: relative;
}
#mainMenu ul {
list-style: none;
float: right;
background-color: #FFFFFF;
}
#mainMenu ul li {
position: relative;
display: inline;
float: left;
/*padding-right: 1.5em;*/
font-size: 1.2em;
zoom:1;
overflow: hidden;
}
#mainMenu>ul>li {
line-height: 2em;
}
#mainMenu ul li:hover {
overflow: visible;
}
#mainMenu ul li a {
float: left;
text-decoration: none;
color: black;
padding: 0 1em;
}
#mainMenu>ul>li:last-child a {
padding:0.4em 1em 0.4em 1em;
border-radius:4px;
background-color: #00b200;
color: #FFFFFF;
}
#mainMenu ul li a:hover{
text-decoration: none;
color: rgb(42, 160, 239);
}
#mainMenu ul ul{
position: absolute;
top: 2em;
left: 60%;
width: 10em;
margin-left: -3em;
height: auto;
border: solid #CCC;
border-width: 0 1px 1px;
}
#mainMenu ul ul:first-child{
padding-top: 2em;
}
#mainMenu ul ul li,
#mainMenu ul ul a {
display:block;
float:none;
border:0;
box-shadow:none;
text-align:center;
font-size: 1em;
padding: 0.4em;
text-align: left;
}
#mainMenu ul ul li:first-child {
border-top:1px solid rgb(72, 147, 196);
}
#mainMenu ul ul li {
border-top: 1px solid #e9e9e9;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
background:#F2F6FA;
color:#333;
}
HTML
<div id="nav-row">
<h1>
<a href="\">
Corporate Site
<span></span>
</a>
</h1>
<div id="mainMenu">
<ul>
<li>About
<ul>
<li class="company">Company Profile</li><li class="team">
The Team</li><li class="linsux">
Pricing Packages</li>
</ul></li>
<li>Services
<ul>
<li class="webDesign">Websites</li><li class="Emails">
Landing Pages</li><li class="Logos">
Logos</li>
</ul></li>
</li>
<li>Case Studies</li><li>
Blog</li><li>
Contact</li><li>
Free Web Analysis</li>
</ul>
</div>
</div>

Answer 1

It because you use to indent the submenu % of parent width which isn't the same. margin-left: -3em is a constant.
Use, for example:
left: -10px; /* I see the first submenu cca. 10px before the parent LI */
margin-left: 0;
Not sure why you indent by 60% and the move the submenu back using -3em.

Answer 2

try the following :
#mainMenu ul ul {
left: 39% !important;
}
Or
#mainMenu ul ul {
left: 0;
margin-left: 0;
}