为什么我的嵌套导航栏不能正常下降？

我想添加一个下拉菜单到我的导航栏，但我无法正确地做到这一点？任何人都可以帮助我正确地格式化，以便每当盘旋时能正确下降？为什么我的嵌套导航栏不能正常下降？

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

为什么我的嵌套导航栏不能正常下降？

回答

相关问题