Suckerfish issues

Technical Website Design/Showcase
1

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.

2

Any chance you could post an example of a full web page using this, so we can see it in context?

I’d try taking each element (first level ul, first level li, second level ul, second level li, …) and going through the stylesheet to see which properties apply to it. (Or, using Firebug extension in Firefox or Chrome/Safari’s web inspector, inspect the styles on each element.)

Check which properties from the second level are also affecting the third level and make sure they are being overridden if necessary.

Finally, look at the positioning on each level–if it’s being absolutely positioned, what is the position relative to?

3

Yes, the issue shows up here, for one, in the about us menu. And I’ll try messing with them a bit, but I only wrote part of the code here and I’m having a bit of trouble figuring out how the rest is structured

4

Hmm, this is a tricky one…

At this point, what I would do is start with the menu HTML on its own with no CSS, and start adding in the CSS one property at a time (leaving out the irrelevant ones like text-align).

My question is not why isn’t the third-level menu where it should be, but why is it layered over the second-level menu in the first place.

You could also try to rewrite the CSS and use relative positioning instead of absolute positioning. Put “position: relative;” on each LI (no left or right). Then position the second and third ULs relative to the containing LI.

If that doesn’t help, I’ll try to come back to this tonight and spend some time looking at the CSS closely.

5

Alright, thank you. I’m going to see what I can do here, now that I have a better place to start. I appreciate the help

EDIT: After a bit of playing with it, I did finally get the menu to move over to the proper spot by adding the attribute

#navigation ul.menu li ul li ul a,
#navigation ul.menu li ul li ul a:link,
#navigation ul.menu li ul li ul a:visited {
	margin-left:186px;
}

However, I am now having an issue with the top and bottom background images (which give a beveled appearance to the menu) not shifting over far enough to line up with the menu. I’ve tried adding an attribute that should fix it, but the attribute won’t take and I’m not sure why. I am attempting to assign the attribute to “navigation ul.menu li ul li ul li.first” and “navigation ul.menu li ul li ul li.last”, which is roughly the same as the second level menu, but with an additional li ul added (i.e. navigation ul.menu li ul li.first) to bring it down to the third level.