Why are my top-level navigation elements shifting when a previous top-level element is hovered over?

Question

I'm having trouble identifying the source of the following problem. I am working with the following menu:

The Problem is that when I hover over a top-level element, all of the elements under the hovered-over top menu shift to the right like so:

(Note the top-level elements under the sub-level elements.)

I've tried modifying the positioning of each of the elements of my style sheet but have not yet succeeded in fixing this issue. (Please disregard the edge of the jquery accordion in the above pictures. I'll attempt to fix these with z-index.)

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>

Any help would be greatly appreciated. Thanks in advance.

Answer 1

It's the float:left on the sublevel list items that's causing it. Add clear: both; to the #navigation li css to fix the horizontal shift issue.

After that, you'll notice that the menu now shifts vertically. You'll need to change position: relative to position: absolute on li:hover .sublevel

Here's a fiddle