爲什麼我的嵌套導航欄不能正常下降？

我想添加一個下拉菜單到我的導航欄，但我無法正確地做到這一點？任何人都可以幫助我正確地格式化，以便每當盤旋時能正確下降？爲什麼我的嵌套導航欄不能正常下降？

HTML：

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a> 
      <ul> 
       <li><a href="#">Me</a></li> 
       <li><a href="#">Website</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

CSS：

nav { 
    background-color: #311310; 
} 
nav ul ul { 
    display: none; 
} 
nav ul li:hover > ul { 
    display: block; 
    position: absolute; 
    left: 0px; 
    width: 100%: 
} 
nav ul li ul li { 
    background: #311310; 
    display: block; 
} 
nav ul{ 
    margin: 0px; 
    padding: 10px 0px 10px 100px; 
} 
nav ul li { 
    color: #d9d9d9; 
    display: inline; 
    padding: 0px 10px; 
    font-family: klavika; 
    font-size: 14pt; 
} 
nav ul li a { 
    color: #d9d9d9; 
    text-decoration: none; 
} 
nav ul li a:hover{ 
    color: #ffffff; 
}

這裏是破碎的導航欄快：

Navigation Bar

我如何顯示嵌套一個正確的約？

來源

2014-09-03 Naveen Niraula

給position: relative;父：

nav ul li { 
    color:    #d9d9d9; 
    display:   inline; 
    padding:   0px 10px; 
    font-family:  klavika; 
    font-size:   14pt; 
    position:   relative; 
}

而且position: absolute;到菜單：

nav ul li ul { 
    background: #311310; 
    display: block; 
    position: absolute; 
    left: 0; 
}

來源

2014-09-03 11:05:42

沒有問題仍然存在我試過了！ – 2014-09-03 11:08:21

@mistgeek你可以製作一個jsbin或jsfiddle嗎？ – 2014-09-03 11:10:35

@mistgeek http://jsbin.com/rusepefazuyi/1 – 2014-09-03 11:11:35

試試這個代碼

添加position: relative爲nav ul li

來源

2014-09-03 11:34:44 Venk

爲什麼我的嵌套導航欄不能正常下降？

回答

相關問題