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を引き起こしているのは、サブレベルのリスト項目にあります。css に 追加clear: both;して、水平シフトの問題を修正します。#navigation li

その後、メニューが垂直方向に移動することに気付くでしょう。オンに変更position: relativeする必要がありますposition: absoluteli:hover .sublevel

ここにフィドルがあります

于 2012-12-28T16:34:15.387 に答える