子菜单项将不与父项

我想创建一个下拉菜单排队，但是。我经历了很多例子，我总是得到相同的结果。子菜单项将不与父项

我的CSS代码是

#mainNav { 
    margin-top: 20px; 
    width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0; 
    overflow: hidden; 
    background-color: #BBFFFF; 
    zoom: 1; 
} 

#mainNav li { 
    float: left; 
    list-style: none; 
} 
#mainNav li a { 
    color: #000000; 
    display: block; 
    width: 80px; 
    font-size: 14px; 
    text-align: center; 
    text-transform: uppercase; 
    text-decoration: none; 
    padding: 7px 0px 7px 0px; 
    border-right: 1px solid #999;  
    zoom: 1; 
} 
#mainNav li ul { 
    display: none; 
} 
#mainNav a:hover { 
    background-color: #66FF66; 
} 
#mainNav li:hover ul { 
    display: block; 
    position: absolute; 
} 
#mainNav li:hover li { 
    float: left; 
    width: 80px; 
    background-color: #BBFFFF; 
    margin: 0; 
    padding: 0; 
}

我的HTML是

<div> 
    <ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a></li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

来源

2013-02-16 MorganJ

而不是'显示：block'使其'显示：直列block' – asifsid88 2013-02-16 19:11:10

在发布代码是有帮助的去掉所有的，我们并不需要了解的东西。 – sheriffderek 2013-02-16 20:04:25

你可以使用一个负利润率左拉回来的线。将它添加到：

#mainNav li:hover ul {}

或者你可以设置填充：0;在同一个元素上。

而且，你缺少在关闭“'：

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>

来源

2013-02-16 19:13:15 Phil

复制粘贴，并尝试这个从这个例子中的东西会帮助你

<html> 
<head> 
<style type="text/css"> 
#mainNav{ 
    /* Your mainNav decoration here */ 

} 
#mainNav li{ 
    list-style:none; 
    display:inline-block; 
    background-color:#0FF; 
    padding:10px; 
    border:1px solid #000; 
} 

#mainNav ul{ 
    position:absolute; 
    display:none; 
    padding:0px; 
    top:50px; 
} 

#mainNav li:hover ul{ 
    display:inline-block; 
} 
</style> 
</head> 
<body> 

<ul id="mainNav"> 
    <li><a href="pageone.html" id="pageOneLink">Page One</a> 
    <br /> 
     <ul> 
     <li><a href="onePageOne.html" name="onePageOneLin">Sub Page One</a></li> 
     </ul> 
    </li> 
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li> 
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a> 
    <br /> 
     <ul> 
     <li><a href="threePageOne.html" name="threePageOneLin">Sub Page One</a></li> 
     </ul> 

    </li> 
    </ul> 

</body> 
</html>

来源

2013-02-16 19:40:05 harsh8888

有很多的CSS。在那里，这是不够具体和一些东西，只是在错误的地方。

我已经在这里写出了一个jsfiddle：A DISTILED VERSION OF YOUR CODE

你有李，而不是UL它属于列表样式。您对子列表和其他列表的描述也不够详细。使用>喜欢，

.main-nav > li > a { }会说只针对李的第一层，并在中，只有在黎等

我会给UL的类等见捣鼓什么，我想是最简单的方法。对于其他人，请让我知道，如果我的小提琴可以更简洁。

来源

2013-02-16 20:02:41 sheriffderek

此外，为了方便，我认为更好的办法是使用0或什么，而不是显示高度：无; - 即使看不到它，也能让盲人等的屏幕阅读器阅读文本。您实际上也可以对高度变化进行动画处理。 – sheriffderek 2013-02-16 20:08:50

这里是另一个拨弄我叉式使展会具有高度的0过渡，而不是显示没有下拉。 http://jsfiddle.net/sheriffderek/SvUcL/ – sheriffderek 2013-02-16 20:32:32

子菜单项将不与父项

回答

相关问题