0

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

顶部菜单

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

子菜单更改了顶部菜单

(注意子级元素下的顶级元素。)

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

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

4

1 回答 1

1

这是float:left导致它的子级列表项。添加clear: both;#navigation licss 以修复水平移位问题。

之后,您会注意到菜单现在垂直移动。您需要更改position: relativeposition: absoluteonli:hover .sublevel

这是一个小提琴

于 2012-12-28T16:34:15.387 回答