Small menu popup on hover via CSS - IE prob

[Barefootsanders]

Hey all,

I'm trying to make a small menu popup via CSS. On rollover, the link should display another set of links below the link that the mouse is hovering on. The code Below works in FF but not in IE. Could someone help out? Thanks.

style.css

.navigation {
	margin: 0.5em; 
	padding: 0.3em; 
	border: 1px solid #C4C4C4; 
	text-align: left;
}
.navigation li a:link, a:visited{
	color: #545454;
	text-decoration: none
	
}
.navigation li a:hover{
	color: #72C32B;
}
.navigation li a:active {
	color: #545454;
	text-decoration: none
}
.navigation ul{
	list-style-type: none;
	margin: 0.3em 0 0.1em 0.1em;
	padding: 0em 0 0.1em 1em;
}

.navigation li .popup {
	display:none;
	background-color:white;
	background-style:solid;
	position:float;
}
.navigation li:hover .popup,
.navigation li:focus .popup,
.navigation li:active .popup  {
	display:block;
}

nav.html

<div class="navigation">
	<ul>
		<li><a href="Home.html">Home</a></li>
		<li>
			<a href="#">Links</a>
			<div class="popup">
				<ul>
					<li><a href="link1.html">Link 1</a></li>
					<li><a href="link2html">Link 2</a></li>
					<li><a href="link3.html">Link 3</a></li>
				</ul>
			</div>
		</li>	
	</ul>
</div>

[DangerDev]

hi
use javaScript as follows:
Links
where inside fun1() put
document.getElementById("div_p").style.display="block";
and inside fun2() put
document.getElementById("div_p").style.display="none";
where div_p is id of "popup" tag
.....i hope it solves your problem.
if you find to do something like this in IE also plz put here...
have a nice time !!!

[Barefootsanders]

hi use javaScript as follows: Links where inside fun1() put document.getElementById("div_p").style.display="block"; and inside fun2() put document.getElementById("div_p").style.display="none"; where div_p is id of "popup" tag .....i hope it solves your problem. if you find to do something like this in IE also plz put here... have a nice time !!!

Hey,

Thanks for the help however I get an error when I attempt to run this code:

javascript

<script language="javascript">
	function displayMenu() {
		document.getElementById("popup").style.display = "block";
	}
	
	function hideMenu() {			
		document.getElementById("popup").style.display = "none";
	}
</script>

html

<div class="navigation">
	<h2>Menu</h2>
		<ul>
			<li>
				<a href="#" onMouseOver="javascript:displayMenu();" onMouseOut="javascript:hideMenu();">Links</a>
				<div class="popup">
					<ul>
						<li><a href="Link1.html">Link1</a></li>
						<li><a href="Link2.html">Link2</a></li>
						<li><a href="Link3.html">Link3</a></li>
					</ul>
				</div>
		</ul>
</div>

I get an "Object required" error within both of the function where document.getelementbyid... is.

Any suggestions?

[Barefootsanders]

btw, popup is a nested div. Would that make any difference?

[Barefootsanders]

Ok i figured out what I was doing wrong. My popup div did not have an ID. But now I have another problem... The popup works when the mouse is over the parent link but when you go to choose one of the sub links, the onMouseOut is fired and the links disappear. Is there a way around this? Thanks.