Drop down menus in firefox

[947740]

I have some drop down menus in a div called #header.  Whenever I view them in firefox, it creates a little box that you must scroll down for the drop down menus.  It seems to work fine in all other browsers.

 

The code is this, with a few changes --> http://meyerweb.com/eric/css/edge/menus/demo.html,

and some javascript modifications to make it work in other browsers.

 

Is this a known problem that can be fixed, or just something in my code?  (Which I can post if it is necessary.)

[haku]

We need either your code or preferably a link. Without one or the other, its hard to say what the problem may be.

[947740]

The applicable CSS:

  ul li ul li a,ul li ul li a:hover { text-align: left; display: block; text-decoration: none; background: black; border: none; }
  ul li:hover ul, ul li.over ul { display: block; position: absolute; top: 1.4em; left: 0px;  border: solid #FFCC44 2px; }
  /* Singular */
  ul { margin: 0; }
  ul#margin { margin: 1em; }
  li { z-index: 100; }
  li li a { display: block; }
  #nav { overflow: auto; }
  #nav ul ul {display: none;}
  ul ul {width: 14em; }
  li { position: relative; }
  li ul { display: none; position: absolute; }
  li ul li ul { display: none; position: absolute; }
  li > ul { top: auto; left: auto; }
  li li { display: block; float: none; }

  ul li ul li a:hover { color: #FFCC44; font-weight: bold; }

 

I do not think this is needed, but this is the javascript that makes it work in IE6:

 

<!--//--><![CDATA[//><!--
// Function from the popular suckerfish drop-down menu: http://www.htmldog.com/articles/suckerfish/example/
function startList() {
if (document.all&&document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
			node.onmouseover=function() {
				this.className+=" over";
			}
			node.onmouseout=function() {
				this.className=this.className.replace(" over", "");
			}
		}
	}
}
}
/*window.onload=startList;*/

//--><!]]>

 

And the menu:

 

<div id='links' align='center'>

<ul id='nav'>
<li><a href='' class='home'>Home</a></li>
<br /><br />
<li><a href='Board of Education/'>Board of Education</a></li>
<li><a href='Public Notices/'>Public Notices</a></li>
<li><a href=''>Alumni</a></li>

<br /><br />
<li><a href='#'>Academics<span style='color: red;'>...</span></a>
<ul>
<li><a href='Elementary/'>Elementary</a></li>
<li><a href='HS/'>Jr/Sr High</a>
<li><a href='admin/assignments.php' style='padding-left: 1em;'>Class Assignments</a></li>
<li><a href='Media Center/'>Media Center</a></li>
</ul>
</li>

<li><a href='#'>Athletics<span style='color: red;'>...</span></a>
<ul>
<li><a href=''>Streaming Video</a></li>
<li><a href=''>Calendars</a></li>
<li><a href='http://www.fmyouthsports.com'>FM Youth Sports</a></li>
</ul>
</li>
<li><a href='#'>Resources<span style='color: red;' >...</span></a>
<ul>
<li><a href='Parent Resources/'>Parent Resources</a></li>
<li><a href='' style='padding-left: 1em;'>Parent Access</a></li>
<li><a href='Student Resources/'>Students Resources</a></li>
<li><a href='admin/main_announcements.php' style='padding-left: 1em;'>Daily Announcements</a></li>
<li><a href='Staff Resources/'>Staff Resources</a></li>
<li><a href='http://mail.fmtabor.k12.ia.us/IClient' style='padding-left: 1em;'>Email</a></li>
<li><a href='Staff Resources/staff_directory.php'>Staff Directory</a></li>
</ul>
</li>
<li><a href='#'>Other<span style='color: red;'>...</span></a>
<ul>
<li><a href='school_closings.php'>School Closings</a></li>
<li><a href='Fundraisers/'>Fundraisers</a></li>
<li><a href=''>School Shop</a></li>
</ul>

</li></ul></div>

[haku]

I'm thinking (though not 100% sure by any means) that the problem lies here:

 

#nav { overflow: auto; }

 

This is probably being inherited by its child elements, causing the problem where you are having it.

 

Put this:

 

overflow:auto;

 

into the CSS for the element that has the scroll bar on it.

[947740]

So instead of putting that on the unordered list, I should put it in the containing div, header?

[haku]

Sorry, that was a typo. It's late here and I'm kind of tired!

 

Leave the overflow: auto; on the OL.

 

Add:

 

overflow: visible;

 

to the CSS for the element which is showing a scroll bar. I don't know which element that is since I can't see your site, so you will have to figure out which one it is and add the above code.

[947740]

Actually, I deleted it, and it worked just fine.  Thanks a lot!  You made my life a lot easier...