html - 下拉被推到右边？

Question

由于某种原因，我的下拉菜单被推到了右边。它应该直接在有人悬停的链接下方打开，但它向右打开了大约 30 像素，我不明白为什么。当您在我的网站上滚动“工作”时，您可以看到这个问题:http://www.noellesnotes.com

我的代码:

CSS

ul.site-navigation {
    text-align: center;
    list-style: none;
}

ul.site-navigation li a{
    padding: 50px 0 47px 0;
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
    border-bottom: 3px solid transparent;
}

ul.site-navigation > li {
    position: relative;
    width: 125px;
    float:left;
    margin: 0;
}

ul.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
    padding: 97px 0 0 0;
}

ul.site-navigation ul {
    list-style: none;
     height: 50px;
     left: 0;
     z-index: 1000;
    padding: 0;
    display: none;
}

ul.site-navigation ul li {
     float: none;
 }

ul.site-navigation li:hover ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
}

ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 16px;
    text-shadow: none;
    padding: 5px 10px;
    width: auto;
    height: auto;
    text-transform: uppercase;
    border: 2px solid #FFF;
    color: #FFF;
    margin: 5px 10px 0 0;
}

ul.site-navigation ul li a:hover {
    font-weight: regular;
    font-size: 16px;
    text-shadow: none;
    padding: 5px 10px;
    width: auto;
    height: auto;
    text-transform: uppercase;
    border: 2px solid #FFF;
    color: #FFF;
}

.site-title a {
    color: rgb(185,40,141);
    font-family: 'Arvo', serif;
    text-transform: uppercase;
    font-size: 63px;
    background-color: rgba(255,255,255,1);
    text-align: center;
    text-shadow: #FFF 1px 1px,#ccc 2px 2px;
    width: 500px;
    float: left;
    padding-top: 13px;
    font-weight: normal;
    letter-spacing: normal;
}

.site-branding {
    display: table;
    width: 100%;
    height: 400px;
    font-family: 'Lato', verdana, san-serif;
    font-size: 6em;
    text-shadow:1px -1px rgba(242,141,89,0.2);
    text-align: center;
    text-transform: uppercase;
    color: rgb(255,255,255);
    background-image: url('http://www.noellesnotes.com/wp-content/themes/portfolio/images/lights.jpg');
    background-attachment:fixed;
}

HTML:

               <ul class="site-navigation">
                    <li><a href="/bio/">About</a></li>
                    <li><a href="/portfolio/">Work</a>
                        <ul class="submenu">
                            <li><a href="/portfolio/seventeen/">Seventeen.com</a></li>
                            <li><a href="/portfolio/1dc/">One Direction Connection</a></li>
                        </ul>
                    </li>
                </ul>

Answer 1

所有 lis 的直接子级的 uls 都有左边距。 (li > ul {margin-left:1.5em})

将类似这样的内容添加到您的 css 以覆盖您的菜单:

ul.site-navigation > li > ul {
   margin-left:-2.75em
}