下拉菜单向右移动

Question

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

第一个下拉菜单项正常出现。但是，第二个下拉菜单项略微向右移动。我猜测我设置为 link 的 margin-right 导致下拉菜单稍微向右移动。如果是这样，我该怎么做才能解决这个问题？

这是一个简单的导航菜单，将下拉菜单项的位置设置为绝对位置，并被父元素的 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>

Answer 1

因为你用来缩进父级宽度的子菜单%不一样。 margin-left: -3em 是常数。

使用，例如：

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

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

Answer 2

尝试以下操作：

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

或

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

下拉菜单向右移动

Dropdown Menu shifted to the right

css

css-position