I am struggling to pinpoint the origin of a particular issue I am encountering with my menu. The problem arises when I hover over a top-level element, causing all elements below it to shift to the right:
(Take note of the top-level elements being affected by the sub-level elements.)
I have attempted to adjust the positioning of each element in my stylesheet, but so far, I have been unable to resolve this issue. (Please ignore the edge of the jQuery accordion shown in the images above – I will address those with z-index adjustments.)
Here is the relevant source code:
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
The 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;
}
The 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>
Your assistance with resolving this issue would be greatly appreciated. Thank you in advance.