次の問題の原因を特定できません。次のメニューで作業しています。
問題は、トップレベルの要素にカーソルを合わせると、ホバーしたトップメニューの下にあるすべての要素が次のように右に移動することです。
(サブレベル要素の下のトップレベル要素に注意してください。)
スタイル シートの各要素の配置を変更しようとしましたが、まだこの問題を解決できていません。(上の写真の 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>
どんな助けでも大歓迎です。前もって感謝します。