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

Question

我无法确定以下问题的根源。我正在使用以下菜单：

问题在于，当我将鼠标悬停在顶级元素上时，悬停在顶部菜单下的所有元素都会向右移动，如下所示：

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

我已尝试修改样式表中每个元素的位置，但尚未成功解决此问题。 （请忽略上面图片中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