Member Avatar for 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>
  • 2 Contributors
  • 4 Replies
  • 137 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Barefootsanders

Recommended Answers

All 4 Replies

Member Avatar for DangerDev

hi
use javaScript as follows:
<a href="#" onmouseover="javascript:fun1();" onmouseout="javascript:fun2()">Links</a>
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 !!!

Member Avatar for Barefootsanders

hi
use javaScript as follows:
<a href="#" onmouseover="javascript:fun1();" onmouseout="javascript:fun2()">Links</a>
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?

Member Avatar for Barefootsanders

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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.