IE7 CSS Menu Problems

[Ian Cunningham]

I've re-coded my CSS files a little to make the site work with IE7 - I've managed to do this OK so far, apart from the CSS dropdown menu.

Site in question : http://www.pcreview.co.uk/

The menu works fine in IE6/FF, however in IE7 it only works if I haven't clicked anywhere on the page already. If I have, the menu sticks and won't hide away once my mouse is moved away.

Is this something wrong with my code, or a bug in IE7?

[Dan Schulz]

Despite having 116 XHTML validation errors, it's working fine for me on Internet Explorer 7 RC1 (Windows XP Pro, Service Pack 2).

[Ian Cunningham]

Thanks Dan, I think I've just put a fix in place for the suckerfish CSS menu by adding:

LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}

[Dan Schulz]

Using display: none; and display: block; can cause accessibility issues with some screen readers. Absolute positioning would be better.

Here's an example of an accessible horizontal dropdown menu:

  <ul id="menu">
  	<li><a href="">Main Menu Item</a></li>
  	<li><a href="">Main Menu Item</a></li>
  	<li><a href="">Main Menu Item</a>
  		<ul>
 			<li><a href="">First Sub-Menu Item</a>
  				<ul>
 		 		<li><a href="">Second Sub-Menu Item</a></li>
 		 		<li><a href="">Second Sub-Menu Item</a></li>
 		 		<li><a href="">Second Sub-Menu Item</a></li>
  				</ul>
  			</li>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
  		</ul>
  	</li>
  	<li><a href="">Main Menu Item</a>
  		<ul>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
  		</ul>
  	</li>
  	<li><a href="">Main Menu Item</a>
  		<ul>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
 			<li><a href="">First Sub-Menu Item</a></li>
  		</ul>
  	</li>
  	<li><a href="">Main Menu Item</a></li>
  </ul>

And the CSS for it (note: this uses the universal selector to strip nearly all selectors of their margins and padding, and was culled from my CSS tutorial, still a WIP):

  * {
  	margin: 0;
  	padding: 0;
  }
  
  #menu, #menu ul {
  	list-style: none;
  }
  	#menu li {
  		background-color: #909090;
  		color: inherit;
  		display: inline;
  		float: left;
  		position: relative;
  		width: 8em;
  	}
  
  	#menu li:hover {
  		background-color: #666;
  		color: inherit;
  	}
  
  	#menu li:hover ul, #menu li.menuHover ul {
  		left: auto;
  	}
  		#menu ul {
 			min-height: 1%; /* this is a fix for IE7's "hasLayout issue" which will allow the dropdowns to work. This declaration is not affected by any other modern browser. */
  			position: absolute;
  			left: -999em;
  		}
  			#menu ul li {
  				clear: left;
  				margin-top: -1px;
  				width: 9em;
  			}
  
 				#menu li:hover ul ul, #menu li.menuHover ul ul {
 					min-height: 1%;
 					position: absolute;
 					top: 1px;
 					left: -999em;
  				}
  
 				#menu ul li:hover ul, #menu ul li.menuHover ul {
 					left: 9em;
  				}
 					#menu ul ul li {
 						width: 10em;
  					}
  
  	#menu a {
  		background-color: transparent;
  		border: 1px solid #F00;
  		color: #FFF;
  		display: block;
  		line-height: 1.5em;
  		margin-left: -1px;
  		text-align: center;
  		text-decoration: none;
  	}
  
  	#menu a:hover {
  		background-color: transparent;
  		color: #FFF;
  	}

Also note that the class "menuHover" is my replacement class name for the standard Suckerfish class attribute. Normally, I don't use the script since I use a .htc file (take one look at #menu li:hover and you'll see why), but I included the class here for the sake of completeness.

[Ian Cunningham]

Thanks once again I'll take a look at doing this now

[Dan Schulz]

Don't forget to fix those 116 XHTML validation errors, ok?