Code is validated (3 Warnings) but still does not work in IE8 but works in Firefox?

[andrewb]

Hi everyone,

I was hoping someone could help. This code works fine in Firefox but in IE8, it does not display the drop down menus.

These are the warnings I get by the validator

7 .menu Redefinition of font-size
11 .menu ul You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.
38 .menu li ul You have no color set (or color is set to transparent) but you have set a background-color. Make sure that cascading of colors keeps the text reasonably legible.

Any ideas? I've merged both the CSS code and the HTML code together.

cheers,
Andrew

<style>


.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#333333 url("images/seperator.gif") bottom right no-repeat;
		color:#cccccc;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}	

		

</style>

<div class="menu">
<ul>
<li><a href="index.php" target="_self" >i-Home</a>
</li>
<li><a href="games.php" target="_self" >Games</a>
<ul>
<li><a href="xbox360reviews.php" target="_self">XBox 360</a></li>
<li><a href="ps3reviews.php" target="_self">PlayStation 3</a></li>
<li><a href="pcreviews.php" target="_self">PC</a></li>
<li><a href="wiireviews.php" target="_self">Wii</a></li>
</ul>
</li>
<li><a href="movies.php" target="_self" >Movies</a>
<ul>
<li><a href="blurayreviews.php" target="_self">Blu-ray</a></li>
<li><a href="dvdreviews.php" target="_self">DVD</a></li>
<li><a href="imaxreviews.php" target="_self">iMax</a></li>
<li><a href="moviereviews.php" target="_self">Movies</a></li>
</ul>
</li>
<li><a href="software.php" target="_self" >Software</a>
</li>
<li><a href="hardware.php" target="_self" >Hardware</a>
<ul>
<li><a href="" target="_self">PC</a></li>
<li><a href="" target="_self">Apple</a></li>
<li><a href="" target="_self">Console</a></li>
</ul>
</li>
<li><a href="coolreviews.php" target="_self" >Comics</a>
</li>
<li><a href="newreviews.php" target="_self" >New Reviews</a>
<ul>
<li><a href="games" target="_self">Games</a></li>
<li><a href="" target="_self">Movies</a></li>
<li><a href="" target="_self">Hardware</a></li>
<li><a href="" target="_self">Comics</a></li>
</ul>
</li>
<li><a href="competitions.php" target="_self" >Competitions</a>
</li>
<li><a href="forums.php" target="_self" >Community</a>
</li>
<li><a href="news.php" target="_self" >News</a>
</li>
<li><a href="test.php" target="_self" >Test</a>
</li>
</ul>
</div>

[traq]

IE has limited support for the :hover psuedoclass. You can try something like whatever:hover, or simply use javascript to power the dropdowns.

good luck

[andrewb]

Thanks Adrian, worked perfectly

[traq]

no problem. you should edit your first post and add the "Resolved" prefix to your thread title.