为什么我的顶级导航元素在前一个顶级元素悬停时发生了变化？

Question

我无法识别以下问题的来源。我用下面的菜单工作：

的问题是，当我将鼠标悬停在一个顶级元素，所有下徘徊，在顶部菜单右移像这样的元素：

（注意下的子级元素的顶级元素。）

我试图修改我的每一个样式表的元素的定位，但没有ÿ et成功解决了这个问题。 （请忽略上面的图片jQuery折叠的边缘，我会尝试用z-index修复这些。）

下面是相关的源代码：

<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"> 

的CSS：

#navigation { 
    font-size:0.75em; 
    width:160px; 
    position:absolute; 
    z-index: 1; 
    margin-top:13px 
} 

#navigation ul { 
    margin:0px; 
    padding:0px; 
} 

#navigation li { 
    list-style: none; 
    background-color:#2C5463; 
} 

ul.top-level { 
background:#2C5463; 
width:160px 
} 

ul.top-level li { 
border-bottom: #2C5463 solid; 
border-top: #2C5463 solid; 
border-width: 1px; 
z-index:15; 
} 

#navigation a { 
color: #fff; 
cursor: pointer; 
display:block; 
height:25px; 
line-height: 25px; 
text-indent: 10px; 
text-decoration:none; 
width:100%; 
z-index:9; 
} 

#navigation a:hover{ 
text-decoration:underline; 
    background: f3f3f3; 
    z-index:10; 
    width:200px; 
} 

#navigation li:hover { 
background: #f90; 
position: relative; 
} 

ul.sub-level { 
    display: none; 
    left:100px; 
    z-index:-10 
} 

li:hover .sub-level { 
    background: #999; 
    border: #2C5463 solid; 
    border-width: 1px; 
    display: block; 
    position: relative; 
    top: -25px; 
    z-index: -1; 
    left:100px; 
} 

ul.sub-level li { 
    border: none; 
    display:block; 
    float:left; 
    width:80px; 
    position:relative; 
    z-index:-1; 
} 

#navigation .sub-level { 
    background: #999; 
} 

的HTML：

<div id="navigation"> 
    <ul class="top-level"> 
    <li><a href="http://www.iliff.edu">Iliff</a></li> 
    <li><a href="">Term</a> 
     <ul class="sub-level"> 
     <li><a href="/schedules/30/2012/all/by_begin_tim/">Spring 2013</a></li> 
     <li><a href="/schedules/20/2012/all/by_begin_tim/">Winter 2013</a></li> 
     <li><a href="/schedules/10/2012/all/by_begin_tim/">Fall 2012</a></li> 
     <li><a href="/schedules/5/2012/all/by_begin_tim/">Summer 2012</a></li> 
     <li><a href="/schedules/30/2011/all/by_begin_tim/">Spring 2012</a></li> 
     <li><a href="/schedules/20/2011/all/by_begin_tim/">Winter 2012</a></li> 
     </ul> 
    </li> 
    <li><a href="">Course Type</a> 
     <ul class="sub-level"> 
     <li><a href="/schedules/20/2012/all/">All Courses</a></li> 
     </ul> 
    </li> 
    <li><a href="">Time Block</a> 
     <ul class="sub-level"> 
     <li><a href="/schedules/20/2012/all/">All Courses</a></li> 
     </ul> 
    </li> 
    <li><a href="">Order by</a> 
     <ul class="sub-level"> 
     <li> 
      <a href="/schedules/20/2012/all/by_course/">Course</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

任何帮助将不胜感激。提前致谢。

Answer 1

这就是float:left上造成它的子级列表项目。将clear: both;添加到#navigation li css来解决水平位移问题。

之后，您会注意到菜单现在正在垂直移动。你需要改变position: relative到position: absolute上li:hover .sublevel

Here's a fiddle