Help with removing JS from CSS menu

Discussion in 'CSS' started by le007, Aug 9, 2008.

0
  1. #1
    Anyone know how to get the EXACT same effect without having the Javascript in there for IE please?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #151517;
	color: #FFFFFF;
}
#menuh {
	background-color: #6C7079;
	border-top: 1px solid #949494;
	border-bottom: 1px solid #949494;
	height: 24px;
}
#menuh li {
	list-style: none;
	position: relative;
	float: left;
}
#menuh a {
	float: left;
	padding: 0 1em;
	color: #FFFFFF;
	text-decoration: none;
	height: 24px;
	line-height: 24px;
}
#menuh a:hover {
	background-color: #464D58;
}
#menuh ul {
	position: absolute;
	top: 24px;
	background-color: #6C7079;
	border: 1px solid #949494;
	width: 100px;
	padding: 0 4px;
	left: -999em;
}
#menuh ul li {
	width: 100%;
	padding: 4px 0;
	border-bottom: 1px solid #949494;
}
#menuh ul li.last {
	border-bottom: 0;
}
#menuh ul a {
	height: 1.2em;
	line-height: 1.2em;
	padding: 0 0 0 5px;
	float: none;
	display: block;
}
#menuh li:hover ul, #menuh li.sfhover ul {
	left: 0px;
}
-->
</style>
<!--[if lt IE 7]><script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("menuh").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script><![endif]-->
</head>
<body>
<ul id="menuh">
	<li><a href="#">Homepage</a>
		<ul>

			<li class="last"><a href="#">About</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 1 </a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>

			<li class="last"><a href="#">Link 3</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 2</a>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>

			<li class="last"><a href="#">Link 3</a></li>
		</ul>
	</li>
	<li><a href="#">Gallery 3</a> </li>
	<li><a href="#">Resources</a> </li>
	<li><a href="#">Contact</a> </li>

</ul>
</body>
</html>
    Code (markup):

     
    le007, Aug 9, 2008 IP