suckerfish problems

[schilly]

Hi Everyone,

 

Hoping you can help. My CSS skills aren't very good yet. More of a php guy. I'm having problems implementing the suckerfish dropdowns. I've followed the examples exactly and gone over them numerous times but I'm only getting the first level of two levels to display in Firefox/Safari and nothing displays in IE.

 

CSS Code

/* extended menu css */

#mainlevel-top, #mainlevel-top ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
/*border: solid #ebb220;*/
background: #003399;
font-weight: bold;
/* border-width: 1px; */
width: 700px;
float: left;
}

#mainlevel-top a {
display: block;
color: #ebb220;
background: #003399;
font-weight: bold;
width: auto;
text-decoration: none;
padding: 0;
}

#mainlevel-top a:hover {
display: block;
border-width: 1px;
width: auto;
text-decoration: none;
padding: 0;
color: #003399;
background: #ebb220;
}


#mainlevel-top li {
list-style: none;
width: 80px;
float: left;
text-align: center;
padding: 0px;
font-size: 11px;
/*margin-left: 5px;*/
/*margin-right: 5px;*/
line-height: 21px;
white-space: nowrap;
/*border-right: 1px solid #ebb220;*/
}

#mainlevel-top li ul {
list-style: none;
position: absolute;
width: auto;
left: -999em;
height: auto;
/*margin-left: 5px;*/
/*margin-right: 5px;*/
background: #003399;
border-width: 0.25em;
margin: 0;
font-weight: normal;
}

#mainlevel-top li ul ul {
margin: -1em 0 0 10em;
}

#mainlevel-top li:hover ul ul, #mainlevel-top li.sfhover ul ul {
left: -999em;
}

#mainlevel-top li:hover ul, #mainlevel-top li li:hover ul, #mainlevel-top li.sfhover ul, #mainlevel-top li li.sfhover ul {
left: auto;	
background: #ebb220;
color: #003399; 
border: 1px solid #003399;
width: 80px;
}

 

HTML Output w/ Javascript:

//in head tag
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("mainlevel-top").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
	sfEls[i].onmouseover=function() {
		this.className+=" sfhover";
	}
	sfEls[i].onmouseout=function() {
		this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

//in body

<ul  id="mainlevel-top">
<li>Member Lists

<ul >
<li>Alumni</li>
<li>Committee</li>
<li>Teams

<ul >
<li>94/95</li>
</ul>
</li> 
</ul> 
</li>
</ul>		

 

I've shortened down the ul menu code. Any help is greatly appreciated. Let me know if you need any additional info.

 

thanks.

 

[schilly]

66 views and no response. no suggestions at all?

[mediasix]

take a close look at the list, there are closing tags for elements that dont exist. ( i hav made them bold)

maybe restructure and try again.

mediasix

 

<ul >

<li>Alumni</li>

<li>Committee</li>

<li>Teams

 

<ul >

<li>94/95</li>

</ul>

</li>

</ul>

</li>

</ul>

[schilly]

You sure about that?

<ul  id="mainlevel-top"> //1st ul
<li>Member Lists

<ul > //2nd ul
<li>Alumni</li>
<li>Committee</li>
<li>Teams

<ul > //3rd ul
<li>94/95</li>
</ul>  //close 3rd
</li> //close teams
</ul>  //close 2nd
</li> //close member lists
</ul>	//close 1st

 

Well I've narrowed the problem down to it not working in IE6. Works in IE7. Any reasons for that?

 

A few other questions.

 

How do I get vertical menus as apposed to horizontal?

IE seems to offset the menus by about half from the bottom left corner of the LI cell where Firefox starts at the at the bottom left corner and shows perfectly. Is there a way to fix this?