屏幕左侧出现下拉菜单

Question

由于某种原因，当我将鼠标悬停在导航项上时，下拉菜单出现在屏幕的最左侧，而不是在该菜单项下方，我不知道为什么。如果有人可以提供帮助，将不胜感激。

这是我的代码（JSFIDDLE：http://jsfiddle.net/A5jtC/）：

HTML：

<div id="nav" class="wrapper">
    <ul class="site-navigation">
        <li><a href="/bio/">About</a></li>
        <li><a href="/portfolio/">Work</a>
            <ul>
                <li><a href="#">Testing</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

.wrapper{
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    overflow: hidden;
}

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


ul.site-navigation li a{
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 47px 0;
    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 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;
     width: 100px;
     height: 30px;
     position: absolute;
     top: 125px;
     left: 0;
     display: none;
     z-index: 1000;
}

ul.site-navigation ul li {
     float: none;
     line-height: 30px;
 }

ul.site-navigation ul li a {
    transition:none; 
    font-weight: regular;
    font-size: 14px;
 }

ul.site-navigation li:hover ul {
     display: block;
}

Answer 1

试试这个 css，它可能会把你带到你需要去的地方：

.wrapper{
    width: 100%;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    overflow: hidden;
}

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

ul.site-navigation li{
    display: block;
    width: 125px;
    float: left;
}

ul.site-navigation li a{
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    padding: 50px 0 47px 0;
    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 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 li>ul {
    list-style: none;
     height: 50px;
     position: relative;
     display: none;
     z-index: 1000;
}

ul.site-navigation li>ul>li {
     float: none;
     line-height: 50px;
 }

ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
 }

ul.site-navigation>li:hover ul {
     display: block;
 }

Answer 2

你有几个问题。

首先，为了让一个元素出现在另一个元素之下，父元素必须是 position: relative;和直接子位置：absolute;。

接下来，包装元素上的 overflow:hidden 将隐藏出现在父元素下方的所有子元素。

第三，你的列表项必须是浮动的，并给定一个宽度 x 高度，否则浏览器会认为它们都在页面的左侧排列，因为列表项内的元素都是浮动的。

最后，在所有这些之后，您的子菜单默认有 40 像素的左填充。您必须摆脱它才能使子项目排队。

看看这个：

.wrapper{
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
}

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;
     line-height: 50px;
 }

ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
 }

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

}

http://jsfiddle.net/A5jtC/74/

更新：我还不能评论其他人的帖子，但是当您将鼠标悬停在菜单上并显示子菜单时，JRulle 的解决方案会将您的菜单下的所有内容下推。为了防止这种情况，您必须使用上面的相对/绝对定位，以便您的子菜单在显示时不会占用页面空间。

Answer 3

你的风格有一些问题：试试这些：JSFiddle

.wrapper{
    background-color: rgb(255,255,255);
    width: 100%;
    overflow: hidden;
}
ul.site-navigation {
    list-style: none;
}
ul.site-navigation:after {
    clear: both;
}
ul.site-navigation li {
    display: block;
    float: left;
}
ul.site-navigation li a{
    font-family: 'Arvo', serif, Georgia;
    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 a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
ul.site-navigation li ul {
    list-style: none;
    display: none;
    z-index: 1000;
    padding: 0;
    margin: 0;
}
ul.site-navigation ul li {
     line-height: 50px;
}
ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
}
ul.site-navigation li:hover ul {
     display: block;
 }