CSS pulldown fix for IE?

[EXreaction]

On this page:
http://www.lithiumstudios.org/phpBB3/portal.php

There are 3 buttons in the header... Home, Forum, and Other Stuff
With FireFox and Opera the CSS menu works correctly, but how do I make it so that IE users can view it as well?

This is the CSS info:

/* CSS Menu
 ------------ */

.css_menu {
	background: #fff;
	border: 1px solid #ccc;
	}

.css_menu:hover {
	background: #ececec;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 0px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	top: 20px;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	border: 0px solid #ccc;
	border-bottom: 0;
	}

* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
		
li:hover ul { display: block; }

And the page...

	<div id="menubar">
		<table width="100%" cellspacing="0">
		<tr>
			<td class="genmed" width="150px">
				<ul> 
					<li><a href="index.php"><b>Forum</b></a> 
						<ul> 
 							<li class="css_menu"><a href="faq.php"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" border="0" alt="{L_FAQ}" /> {L_FAQ}</a></li>
							<!-- IF S_DISPLAY_SEARCH --><li class="css_menu"><a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" border="0" alt="{L_SEARCH}" /> {L_SEARCH}</a></li><!-- ENDIF -->
							<!-- IF S_DISPLAY_MEMBERLIST --><li class="css_menu"><a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" /> {L_MEMBERLIST}</a></li><!-- ENDIF -->
							<!-- IF S_USER_LOGGED_IN --><li class="css_menu"><a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" border="0" alt="{L_PROFILE}" /> {L_PROFILE}</a></li><!-- ENDIF -->
						</ul> 
					</li> 
				</ul> 
			</td>
			<td class="genmed" width="150px">
				<ul> 
					<li><a><b>Other stuff</b></a> 
						<ul> 
							<li class="css_menu"><a href="viewtopic.php?f=4&t=12">Web Services</a></li> 
							<li class="css_menu"><a href="../phpbb2/index.php">phpBB2 Demo Forum</a></li> 
						</ul> 
					</li> 
				</ul> 
			</td>
		</tr>
		</table>
	</div>

[EXreaction]

Bump, anyone?

[large_nostril]

IE doesn't natively support the CSS :hover selector for every HTML object. To be fair, IE7 does support it properly, but that doesn't help anyone yet. So anyway, in short, where you have li:hover ul { display: block; }, IE says what the heck is this "hover" thang, and ignores it. There are a few workarounds. Peter Nederlof's site has a detailed explanation of the "problem" along with a workaround you can use.

Basically, all you need to do is:
1) Download the workaround file [ right-click, save as ] and upload it to your forum root.
2) In your template file (styles/subSilver/template/overall_header.html), find this code (around line 17):

<!-- IF T_STYLESHEET_LINK -->
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
<!-- ELSE -->

and before it add:

<!--[if IE]>
<style type="text/css" media="screen">
body { behavior: url(csshover2.htc); /* call hover behaviour file */ }
</style>
<![endif]-->

You should be up and runnin now .

[EXreaction]

OMG, thats awsome.

Thanks.