Question

出于某种原因，我的下拉菜单被推到右侧。它应该直接打开某人正在悬停的链接下方，但它向右打开约30px，我无法弄清楚原因。滚动时，您可以看到问题的实际效果＆＃34;工作＆＃34;在我的网站上：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

我认为它很自然，因为li标签有ul标签您可以使用margin-left：-2px来修复此

Answer 2

你所有的孩子都有左边距，这是lis的直接孩子。（li＆gt; ul {margin-left：1.5em}）

将这样的内容添加到您的css中以覆盖您的菜单：

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

跌倒被推向右边？

2 个答案: