Question about how to create flyouts

[smithaa02]

For my website I want to emulate the flyout menu system on target.com. On that website, you hover the mouse button over 'GiftGiving' for example and you get a mini section that appears layered in front of the webpage with html, images, and text you can highlight.

I tried emulating this by creating something like:

<a id='mainlink'>link text<div id='popup window'>popup content</div></a>

with CSS

#mainlink div {
display:none;
}
#mainlink:hover div {
display:block;
position:relative;
z-index:9999;
width:200px;
height:200px;
top:-26px;
left:-350px;
}

And this almost worked in FF, but the entire div was a link so I could select any text.

In IE7, the contents appeared beneath what the page, partially obstructing it despite the high z-index.

And in IE6 this didn't appear at all.

Any ideas or suggestions?

[Xapti]

z-index is a tree-styled design. If another element is on a different branch which had a higher z-index, it doesn't matter how high this one is if it's parent's was lower.

There is no point putting a z-index on your page higher than 1 if you don't have z-index specified anywhere else on the page.

A element is an inline element by default. To contain the block styled div (and block by default as well), you must assign display:block to the #mainlink as well (or like inline-block but it's not supported the best by all browsers).

To keep the hover div open when you have the hover div hovered, you will need to add an additional style "#mainlink div:hover{display:block}"

For z-index, assign position:relative to #mainlink (with no offset), and give it a z-index of 1.