在悬停的CSS中定位嵌套列表

我正在创建一个中心，嵌套的导航菜单，并试图使用纯CSS。看到工作演示的位置：http://jsfiddle.net/jenstechs/MKtTN/2/在悬停的CSS中定位嵌套列表

enter image description here

HTML：

<nav> 
    <ul id="primary"> 
    <li><a href="#">Link One</a></li> 
    <li><a href="#">Link Two</a></li> 
    <li><a href="#">Link Threee</a> 
     <ul class="secondary"> 
      <li><a href="#">Services One</a></li> 
      <li><a href="#">Services Two</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link Four</a></li> 
    <li><a href="#">Link Fiiiiive</a></li> 
    </ul> 
</nav>

CSS：

nav { 
    margin:15px auto 10px auto; 
    width:100%; 
} 

nav ul#primary { 
    width: 100%; 
    padding: 10px 0; 
    margin: 0; 
    background-color: #FFF; 
    text-align: center; 
} 

nav ul#primary>li { 
    display: inline; 
    padding:5px 0; 
    margin-left:0; 
} 

nav ul#primary>li>a { 
    padding: 0px 30px; 
    margin-right:-6px; 
    color: #000; 
    text-decoration: none; 
    border-right:2px solid #999; 
} 

nav ul#primary>li>a:hover, 
nav ul#primary>li.active>a { 
    background-color: #900; 
    color:#FFF; 
    padding-top:10px; 
    padding-bottom:25px; 
} 

nav ul#primary>li:first-child a { 
    border-left:2px solid #999; 
} 

ul.secondary { 
    padding-top:0; 
    position:absolute; 
    display:none; 
} 
ul.secondary li { 
} 

nav ul#primary li:hover ul.secondary { 
    display:block; 
} 
nav ul#primary li:hover ul.secondary li { 
} 

ul.secondary li a { 
    display:block; 
    width:7em; 
    color:#FFF; 
    background-color:#900; 
    font-size:0.8em; 
    text-decoration:none; 
    text-align:left; 
    line-height:1.4em; 
    border-bottom:1px solid #FFF; 
} 

ul.secondary li:last-child a { 
    border-bottom:0; 
} 

ul.secondary li a:hover { 
    color:#DDD; 
}

我也有一个最小的复位，唯一的方式有列表中有几个默认边距。

由于这是一个中心导航栏，我使用的CSS是内联的，而不是浮动的。所以我不知道应该在CSS中放置哪些子菜单实际位于其父元素下方。我见过的大多数例子都有位置：绝对的，但似乎将它保留在左边。我试过各种隐藏和显示方法（显示：，左:)但似乎无法找到这种魔术组合。

实际上，我只有一个子列表，但如果我为它们全部设置了子列表呢？

感谢您的任何建议或链接的例子...

来源

2012-10-26 jendotm

嗯，我试图附加一个屏幕截图... [CSS-NAV-子列表-position.png（HTTP：// jenstechs.net/misc/css-nav-sublist-position.png） – jendotm

要使相对position: absolute元素位置的父母，让家长position: relative。

你的情况：

nav ul#primary>li { 
    display: inline; 
    padding:5px 0; 
    margin-left:0; 

    position: relative; 
}

演示：http://jsfiddle.net/MKtTN/3/

来源

2012-10-26 05:29:23 Blender

哎呀，就是这样。现在我感到很沮丧;我对立场缺乏了解再次发生。谢谢！ – jendotm

等等..现在在IE中看起来很糟糕。我知道，这并不罕见，但是，它至少必须在IE8中可用，不一定是7或6.请参见截图：[IE8子列表覆盖父项]（http://jenstechs.net//misc/css-nav -sublist-IE8.png） – jendotm

在悬停的CSS中定位嵌套列表

回答

相关问题