下拉菜單出現在屏幕左側

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

你有幾個問題。首先，爲了讓元素出現在另一個元素下，父元素必須是position：relative;和直接的孩子的立場：絕對;。

接下來，您的overflow：隱藏在您的包裝元素上會隱藏顯示在父級下的任何子級。第三，你的列表項必須被浮動並給定寬度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的解決方案將推動所有內容的菜單下下來，當你將鼠標懸停在它會顯示一個子菜單。爲了防止這種情況發生，您必須使用上面的相對/絕對定位，以便您的子菜單在顯示時不佔用頁面空間。

Answer 2

試試這個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 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; 
}