Question

我有这样的菜单

<nav id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</nav>

我的CSS文件是这样的

#nav ul li {
    display: inline;
}
#nav ul ul {
    display: none;  
}
#nav ul li:hover > ul {
    display: block;
    position: absolute;
}
#nav ul ul li {
    display: block; 
}

子菜单项下拉并且看起来很好，只是它们在第一个列表项Home下面下降。

如何让他们下载他们所在的父列表项？

Answer 1

这是一个工作解决方案的小提琴：http://jsbin.com/akazev/2/edit

看看新的CSS：

nav ul li {
    display:  block;
    float: left;
}
nav ul ul {
    display: none;  
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    margin-left: -30px;
}
nav ul ul li {
    display: block; 
    float: none;
}

不是将第一级链接显示为内联，而是将它们显示为内联块或浮点数。这就是导航的错误。如果您使用float（就像我一样），请不要忘记将更深层次的链接设置为float: none。你还必须为绝对定位的ul设置一个margin-left。

PS：<nav id="nav">有点无意义吗？

Answer 2

试试这个

<html>
<head>
<style type="text/css">
#nav ul li {
    float:left;
}
#nav ul ul {
    display: none;  
}
#nav ul li:hover ul {
    display: block;
    position:absolute;
}
#nav ul ul li {
    display: block;
    border:1px #ccc solid;
    padding:2px;
    float:none;
}
</style> 
</head>
<body>
<dev id="nav">
 <ul>
  <li>Home</li>
  <li>Menu1
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
  <li>Menu2
   <ul>
    <li>Sub1</li>
    <li>Sub2</li>
   </ul>
  </li>
 </ul>
</dev>
</body>
</html>

Answer 3

在这里，您只需将代码更新为

即可

#nav ul li {
    display: inline;
}
#nav li ul {
    display: none;  
}
#nav ul li:hover ul {
    display: block;
    position: absolute;
}
#nav ul ul li {
    display: block; 
}

http://jsfiddle.net/dPgQN/＆lt; ---这是一个实时预览

Answer 4

试试这个..

HTML代码：

<div id="navMenu">
        <ul>
            <li>Home</li>

            <li>Menu1
                <ul>
                    <li>Sub1</li>
                    <li>Sub2</li>
                </ul>
            </li>
            <li>Menu2
                <ul>
                    <li>Sub1</li>
                    <li>Sub2</li>
                </ul>
            </li>
        </ul>
    </div>

CSS：

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:5px;
    list-style:none;
    float:left;
    position:relative;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
} 
#navMenu ul li:hover ul{
    right: auto;
    left: 0;
    visibility:visible
}

我希望这对你有用。

无法让CSS下拉菜单显示在其父级下方？

4 个答案: