css - 下拉菜单向右移动

除了一个我无法解决的小错误外，我的下拉菜单运行良好。

第一个下拉菜单项正常显示。但是，第二个下拉菜单项稍微向右移动。我猜我设置为链接的右边距导致下拉菜单向右稍微移动。如果是这种情况，我该怎么办才能解决该问题？

这是一个简单的导航菜单，它将下拉菜单项的位置设置为绝对，并被父元素的overflow：hidden功能隐藏。悬停时，下拉菜单以overflow：visible进入视图。

实时站点在这里-> 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>

最佳答案

这是因为用来缩进父宽度的子菜单%是不相同的。 margin-left: -3em是一个常数。

使用例如：

left: -10px; /* I see the first submenu cca. 10px before the parent LI */
margin-left: 0;

不确定为什么要按60%缩进并使用-3em将子菜单移回。