troubleshooting Question

Why wont this CSS / DIV popup menu work?

Avatar of richardsimnett
richardsimnett asked on
CSSHTML
8 Comments3 Solutions1447 ViewsLast Modified:
Hello,
Im working on a user interface design, which when a link in the menu bar is rolled over (hover) a menu is supposed to popup (a DHTML div). It works on my test page (without the menu bar and just a single link), but when I apply it to my menu bar, it does nothing.

Can someone tell me how to fix this so that it works?

Working fix worth 500 points.

Thanks,
Rick
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 
<HEAD>
 
<TITLE>user interface design</TITLE>
<style>
div.popup
{
	display:none;
	position:absolute;
	border:solid 1px black;
	padding:8px;
	background-color:white;
}
a.popup:hover + div.popup
{
	display:block;
}
div.popup:hover
{
	display:block;
}
</style>
 
</HEAD>
 
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
 
<TABLE width=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
	<TR>
 
		<TD align=right>
 
			<IMG SRC="images/user-interface-design_02.jpg" WIDTH=87 HEIGHT=64 ALT=""></TD>
 
		<TD background="images/user-interface-design_03.jpg" WIDTH=150 HEIGHT=64 ALT="" align=center valign=middle><a class="popup" href="#">Offers</a></TD>
 
		<TD background="images/user-interface-design_04.jpg" WIDTH=162 HEIGHT=64 ALT="" align=center valign=middle><a href="#">Identities</a></TD>
 
		<TD background="images/user-interface-design_05.jpg" WIDTH=143 HEIGHT=64 ALT="" align=center valign=middle><a href="#">Employees</a></TD>
 
		<TD background="images/user-interface-design_06.jpg" WIDTH=121 HEIGHT=64 ALT="" align=center valign=middle><a href="#">Reports</a></TD>
		<td width=47% HEIGHT=64 background="images/header_spacer.jpg" border=0 align=right valign=middle><table width=25% cellpadding=0 cellspacing=0><tr><td align=center><small>Welcome Rick!</small></td></tr><tr><td align=center><small><a href="">[logout]</a></small></td></tr></table>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
 
	</TR>
 
</TABLE>
 
<div class="popup">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
 
<p>Content
</p>
 
</BODY>
 
</HTML>
ASKER CERTIFIED SOLUTION
David S.
Consultant & Challenge Subduer
Join our community to see this answer!
Unlock 3 Answers and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros