asked on

Why wont this CSS / DIV popup menu work?

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>

Open in new window

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

uzzidesign

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

richardsimnett

ASKER

uzzidesign,
Ok I understand most of that, but have a question. The page I have is setup so that the menu bar will elongate as screen resolution increases (the last part of the table makes the "stretch" occur). If I use absolute positioning, wont I have to do something in the backend to recalcualte the positions? Whereas with absolute, it seems to position the menu more or less correctly regardless of the screen resolution.

Thanks,
Rick

SOLUTION

uzzidesign

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

richardsimnett

ASKER

uzzidesign,
Well in my case if I move the <div> inside of the <td> would the <td> tag become the container? Would it work if I simply gave it an id defining it as a container?

Thanks,
Rick

uzzidesign

Yes, that would work, but depending on the properties of the td, it may not necessarily stretch proportionally to the entire browser window, but it will stretch relative to the table.

David S.

>> I'm not sure why you have the plus "+" sign.

Wow, uzzidesign, I'm surprised someone with your skills doesn't know what that's for. But then IE6 doesn't support it. It's the adjacent sibling selector "combinator": http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

uzzidesign

erm, thanks for the compliment, Kravimir.
Now I know, eh?