[Zholl]

I'm having issues with the third level of a suckerfish menu on my site. The third level dropdown is not shifting over and is instead overlaying it's parent menu. Here is the list for the menus:

<div id="navigation">
    <ul class="menu">
        <li class="expanded first active-trail"><a href="/node/2" title="About Us">About Us</a>			
            <ul class="menu">
                <li class="expanded first active-trail"><a href="/node/6" title="About FIRST" class="active">About FIRST</a>
                    <ul class="menu">
                        <li class="leaf first"><a href="/competition" title="FIRST Robotics Competition">Competition</a></li>
                        <li class="leaf"><a href="/vision" title="FIRST Vision">Vision</a></li>
                        <li class="leaf last"><a href="/getinvolved" title="Get Involved">Get Involved</a></li>
                    </ul>
                </li>
	   <li class="leaf"><a href="/node/29" title="Awards">Awards</a></li>
	   <li class="leaf"><a href="/node/23" title="Community Involvement">Community</a></li>
                <li class="leaf"><a href="/node/22" title="Team Structure">Structure</a></li>
	   <li class="leaf"><a href="/node/21" title="Leadership">Leadership</a></li>
	   <li class="leaf"><a href="/node/20" title="Mentors">Mentors</a></li>
	   <li class="leaf"><a href="/node/24" title="Sponsors">Sponsors</a></li>
	   <li class="leaf last"><a href="/node/9" title="FAQ">FAQ</a></li>
            </ul>
        </li>
        <li class="expanded"><a href="/node/25" title="Robot">Robot</a>
            <ul class="menu">
                <li class="leaf first"><a href="/node/27" title="Manipulator">Manipulator</a></li>
	   <li class="leaf last"><a href="/node/28" title="Minibot">Minibot</a></li>
            </ul>
        </li>
        <li class="collapsed"><a href="/media" title="Media">Media</a></li>
        <li class="leaf"><a href="/node/1" title="Calendar">Calendar</a></li>
        <li class="leaf last"><a href="/contact" title="Contact Us">Contact</a></li>
    </ul>
</div>

and here is the relevant CSS:

#navigation ul li{ margin:0px; padding:0px; text-align:center; list-style-image:none;  margin:0px; padding:0px; text-align:center; list-style-image:none; display:block; float:left;}

#navigation li a { 
	padding: 5px 0 0 0; 
	text-decoration: none; 
	display:block; 
	color:#90807a; 
	font-size:160%; 
	font-size:18px;
	font-weight:bold; 
	width:93px; 
	height:32px; 
	text-align:center; 
}

#navigation li:hover a { 
	text-decoration:none; 
	color:#ffffff; 
	font-size:18px; 
    -moz-border-radius: 5px 5px 5px 5px;
    background-color: #000000;
	font-weight:bold;
	}

#navigation li.expanded a:hover, #navigation li.expanded:hover a{ background: transparent url(images/menu_hover_pull2.png) no-repeat right; }

#navigation ul.menu { 
	margin:0px; 
	float:right;
}

#navigation ul.menu li {     
  display: block;
  float: left;
  border:none;
  margin: 0 0 0 0 ;
}

#navigation ul.menu li ul {
  left: -999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 196px;
  z-index: 12;
}

#navigation ul.menu li:hover ul,
#navigation ul.menu li.hover ul {
  display: block;
  left: auto;
  text-align:left;
}
  
#navigation ul.menu li ul li {
  /*border-bottom: 1px solid #ffffff;*/
  float: left;
  height: auto;
  margin: 0;
  text-align:left;
}

#navigation ul.menu li ul li.first { background: transparent url(images/menu-pulldownb-bg-top.png) no-repeat top; margin:0; padding:6px 0 0 0;}

#navigation ul.menu li ul li.last { background: transparent url(images/menu-pulldown-bg-bottom.png) no-repeat bottom; padding:0 0 6px 0;}


#navigation ul.menu li ul li.last {
  border-bottom: none;
}

#navigation ul.menu li ul li a,
#navigation ul.menu li ul li a:link,
#navigation ul.menu li ul li a:visited {
  text-decoration: none;   background:#000000;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  padding:0 5px 0 22px;
  display: block;
  width: 159px;
	text-align:left;
	font-weight:bold;
	font-size:15px;
}

#navigation ul.menu li ul li a:hover {
  display: block;
  text-decoration: none;
}

#navigation ul.menu li ul li:hover ul, #navigation ul.menu li ul li.hover ul{
  left: -999em;
}

#navigation ul.menu li:hover ul, #navigation ul.menu li ul li:hover ul {
	left: auto;
}

I'm honestly not sure what's wrong in here, so if anyone can see what's wrong here, I would greatly appreciate it if you could point it out.