0

我有这样的菜单

<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 下下拉。

我怎样才能让他们在他们所在的父列表项下下拉？

4

4 回答 4

5

这是一个可行的解决方案：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 设置一个左边距。

PS：是不是<nav id="nav">有点没意思？

于 2013-05-06T01:29:57.620 回答
0

尝试这个..

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
}

我希望这对你有用。,

于 2014-10-18T10:44:52.693 回答
0

Try this

<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>
于 2013-05-06T01:33:41.350 回答
0

在这里，您是伙伴，只需将您的代码更新为

#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/ <--- 这是实时预览

于 2013-05-06T02:26:35.607 回答