show and hide problems in IE7

[jez]

Hi everyone... here is the code;-

<style>
li, li a {box-sizing: content-box;}

#ddcolortabs li{
	float:left;	
	position:relative;
}

#ddcolortabs li a {
	border: 0;
	display: block;
	height: 25px;
}

#ddcolortabs ul li a:hover {
	border: 0;
	display: block;
	
}
#ddcolortabs ul li ul {
	display: none;
}

/*
#ddcolortabs ul li:hover ul,
div#ddcolortabs ul li a:hover ul,
#ddcolortabs ul li:hover > ul 

*/
#ddcolortabs ul#toplevelmenu li:hover ul
 {
	display:inline; 
	position:absolute;
	z-index:50;
	top:1.2em;
	margin-top:11px;
	left:0; 
	width:300px;
	border:1px solid #888;
	border-top:0;
	background:#ccc;
}

/* style the drop down links with no hover */
#ddcolortabs ul li:hover ul li a,
#ddcolortabs ul li a:hover ul li a {
	display:block; 
	background:transparent url(opaque.png); 
	color:#000; 
	border:0;
	margin:0;
	color:#333;
	font-weight:normal; 
	font-size:0.9em;
	height:auto; 
	line-height:1em; 
	padding:5px; 
	width:86px
}




</style>


<div id="navigation">
	<div id="ddcolortabs">
	  <ul id="toplevelmenu">
		<li id="navHome"><a accesskey="h" href="index.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('NaveImage1','','language/en/images/home_btn_roll.gif',1)"><img src="language/en/images/home_btn.gif" title="Home" name="NaveImage1" border="0" alt="Home" /></a></li>

		<li id="navTechToday"><a accesskey="t" href="technology_today.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('NaveImage2','','language/en/images/tech_today_btn_roll.gif',1)"><img src="language/en/images/tech_today_btn.gif" title="Technology today" name="NaveImage2" border="0" alt="Technology today" /></a></li>
		<li id="navEvents"><a accesskey="e" href="events.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('NaveImage3','','language/en/images/events_btn_roll.gif',1)"><img src="language/en/images/events_btn.gif" title="Events" name="NaveImage3" border="0" alt="Events" /></a></li>
		<li id="navSolutions"><a href='solutions.php'><img src='language/en/images/solutions_btn_roll2.gif' title='Solutions' name='NaveImage4' border='0' alt='Solutions' /></a><ul id='solutionsNav'><li>test</li> <li>test two</li> </ul></li>
		<li id="navCase"><a accesskey="c" href="case_studies.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('NaveImage5','','language/en/images/case_studies_btn_roll.gif',1)"><img src="language/en/images/case_studies_btn.gif" title="Case studies" name="NaveImage5" border="0" alt="Case studies" /></a></li>
		<li id="navAbout"><a accesskey="a" href="about_us.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('NaveImage6','','language/en/images/about_us_btn_roll.gif',1)"><img src="language/en/images/about_us_btn.gif" title="About us" name="NaveImage6" border="0" alt="About us" /></a></li>
		<li id="navContact"><a accesskey="u" href="contact_us.php" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('NaveImage7','','language/en/images/contact_us_btn_roll.gif',1)"><img src="language/en/images/contact_us_btn.gif" title="Contact us" name="NaveImage7" border="0" alt="Contact us" /></a></li>
	  </ul>

	</div>
</div>

Now the problem is that the 2nd level should be shown under the solutions tab, but it only works in firefox. It flickers in Opera and simply does nothing in IE 7 .

It seems to be the hover and display inline properties are not being picked up properly by opera and IE, can anyone make a suggestions on the CSS?

Thanks.

Jez

 

[BillyRayPreachersSon]

Have you tried specifiying a type attribute for your CSS? At present, how's the browser to know that it is CSS unless you tell it? You could be styling bacon, socks, jam, bathtubs, or monkeys for all it knows.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]