Frozen Menu In Firefox

[grtammi]

Hello everyone,

http://algomacountry.pictographics.com

Mousing over the "Explore ...", "About..." and "Plan..." links leave the submenus exposed in Firefox (3.0). This phenomenon doesn't occur in IE 6, IE 7, and Safari.

Here's the really weird part: when I take only the menu out of the code and run it as a separate file (same CSS file), the menus show and hide as expected.

Has anyone ever seen anything like this? I based the dropdowns on some code from Son of Suckerfish dropdown.

The relevant CSS is here:

#nav {
    width: 800px ;
    background: #222527 ;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	background: #222527; 
	color: #fff ;
	padding: 9px ;
	text-decoration: none ;
	font-size: 12px ;
}

#nav a:hover {
    background: #949FC9 ;
    color: #242424 ;
}

#nav li { /* all list items */
	float: left;
}

#nav li li {
    width: 100% ;
}

#nav ul { /* all lists 2nd level and higher */
	position: absolute;
	background: #222527;
	width: 150px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 149px;
}

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

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

And here is a snippet of some of the XHTML:

      <ul id="nav">
        <li class="current">
          <a href="index.php" title="Home">Home</a>
        </li>
        <li><a href="#" title="Explore Algoma Country">Explore Algoma Country</a>
          <ul>
            <li><a href="explore_algoma_country.php" title="Explore Algoma Country">Explore By Map</a></li>

            <li><a href="view.php?cat=community" title="View Communities">Communities</a></li>
            <li><a href="#" title="View Attractions">Attractions</a></li>
            <li><a href="#">Motorsports</a>
              <ul>
                <li><a href="view.php?cat=ATV">ATV</a></li>
                <li><a href="view.php?cat=Snowmobiling">Snowmobiling</a></li>

                <li><a href="view.php?cat=Boating">Boating</a></li>
              </ul>
            </li>
            <li><a href="#">Fishing / Hunting</a>
              <ul>
                <li><a href="view.php?cat=Fly-In Fishing">Fly-In Fishing</a></li>
                <li><a href="... etc etc

Thanks in advance.




Greg

 

[grtammi]

Just an update: This is occuring in earlier versions of Firefox as well.

Greg

 

[grtammi]

Never mind all ... I had a Javascript function for IE clashing with a style.

My bad.

Greg