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

你的风格有些问题：试试这些：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;
 }

Answer 3

你有几个问题。

首先，为了使元素出现在另一个元素下，父元素必须是position：relative;和直接的孩子位置：绝对;

接下来，隐藏在您的包装元素上的溢出将隐藏显示在父级下面的所有子级。

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

最后，在所有这些之后，默认情况下，子菜单的左侧填充为40px。你必须摆脱那些子项目排队。

检查出来：

.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的解决方案会将菜单下的所有内容都推送下来。为了防止这种情况，您必须使用上面的相对/绝对定位，以便子菜单在显示时不占用页面空间。

下拉出现在屏幕左侧

3 个答案: