Posted by fullposter on 12/13/06 23:15

What about playing around with this idea:

<style>/*no "frills"*/
..foo{
display: block;
text-decoration: none;
border:#000000 1px solid;
height: 26px; /*20 + 6px for innerdiv padding*/
width: 300px;
overflow: hidden;
}

..foo span{
display: block;
width: 300px;
height: 20px;
border-bottom:#0000ff 1px solid;
padding: 3px;
}

..foo:hover{
overflow: visible;
color:#ff0000;
height: 78px; /*3 spans * 20 + padding6px * 3 spans*/
}
</style>

<a href="#" class="foo" onclick="return false;">
<span>option a</span>
<span>option b</span>
<span style="border-bottom-width: 0px;">option c</span>
</a>

If IE6 is a concern (it should be), go with javascript on the anchor
rather than css hover. To keep Xhtml strict comaptibility, use spans
and then assing display: block via css.

Being mark up, you could technically put in there all you want, even
images.

To create an image as a spot that triggers the drop down, set an
onmouseover on it (anchors can't nest other anchors, so tricks are
necessary).

If form submission is a concern, go with javascript once again: upon
submission set an onsubmit that populates hidden fields.
It would be very nice to arrange a DOM node swaps to emulate
selections.

I can't write the whole application, but the fact is: the answer is
positive, you could do that, with some work.

I hope this helps
http://www.fullposter.com

[Back to original message]