Dropdown Menu shifted to the right

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">
                <a href="#mainMenu" class="showMenu"></a>
                <a href="#" class="hideMenu"></a>

            <ul>
                <li><a href="About">About</a>
                    <ul>
                        <li class="company"><a href="#">Company Profile</a></li><li class="team">
                        <a href="#">The Team</a></li><li class="linsux">
                        <a href="#">Pricing Packages</a></li>
                    </ul></li>
                <li><a href="Services">Services</a>
                    <ul>
                        <li class="webDesign"><a href="#">Websites</a></li><li class="Emails">
                        <a href="#">Landing Pages</a></li><li class="Logos">
                        <a href="#">Logos</a></li>
                    </ul></li>
                </li>
                <li><a href="Case Studies">Case Studies</a></li><li>
                <a href="Blog">Blog</a></li><li>
                <a href="Contact">Contact</a></li><li>
                <a href="Free Web Analysis">Free Web Analysis</a></li>
            </ul>
            </div>
        </div>

Answer 1

try the following :

#mainMenu ul ul {
    left: 39% !important;
}

Or

#mainMenu ul ul {
    left: 0;
    margin-left: 0;
}

Answer 2

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.