That is great, how about adding the following functionality: The first time I click on one of the four boxes, I get the expanded hidden menu, the next time I click on the same box, its own expanded menu hides again.
Hope this make sense. I do think that having the box clicked makes more sense than just hovering above it. Thanks for your help! Mitko On 10/18/05, Derek de Jong <[EMAIL PROTECTED]> wrote: > > Mitko Gerensky-Greene wrote: > > >I need help with the following: > > > >I need to have 4 boxes on my page and upon hovering AND clicking on each, > I > >need to have a list of links (I suppose, residing in a div) show up below > >the corresponding box. > > > >Could anyone point me towards some code or tutorial explaining how to > >accomplish that? Thanks in advance! > > > > > Well, I spent a few minutes playing with it. I have two renditions, one > of my own: <http://www.automatamedia.com/css-d/links.php> > And another, based on Thierry's CSS Pop Ups > (<http://www.tjkdesign.com/articles/css pop ups/1.asp>): > <http://www.automatamedia.com/css-d/links2.php> > > They use CSS2 selectors and the :focus pseudo-element, mainly because > sticking an unordered or definition list (because that's what the links > are) within an anchor tag got me in trouble with the W3C validator; by > using a CSS2 adjacent sibling selector, I was able to keep them out of > the anchor itself. Alternatively, Thierry's approach uses a "legal" span > tag inside the anchor, though I don't know if you could put a list > inside the span and still validate. I also know there are folks who get > really upset by "display:none", but if I used "visibility:hidden" the > "hidden" boxes would affect the layout according to the spec, which is > not what I wanted. > > Some (not all) caveats: > 1. IE doesn't like it at all, but the IE7 enhanced javascript handles it > just fine. Worrisomely, IE7 doesn't handle this page on its own, which > is why you'll notice the conditional says "lte IE 7" as opposed to "lt > IE 7". There's still talk of finishing the CSS 2.1 support in IE7 on > IEBlog, so here's to hoping. > > 2. Opera 8 just doesn't like it at all. It seems to be the :focus > pseudo-class, because I switched to Thierry's approach specifically > because it already worked Opera, but as soon as I switched from :hover > to :focus, it broke, which I don't understand > (http://www.opera.com/docs/specs). It should "get it," so that's another > bad sign. I understood that Opera doesn't like switching from 'display: > none'; but I tried the SuckerFish positioning (left:-999em) workaround > instead, and it still wouldn't display. There's something Opera doesn't > like, but I'm not sure what it is. Maybe somebody on the list knows the > problem, or can get it to work? > > 3. I tried to use both :focus and :hover, with the obvious problem that > focusing one and hovering another list element would overlay them. I > tried to solve this with more CSS2 selectors, but ran out of time, so I > commented them out but left the examples in. You can try to fix them, > but it's beginning to seem that with a 50% (passes in Firefox, > half-passes in IE , fails in Opera 8) success ratio without even testing > across platforms, you either have to be very committed to CSS and > compliant code or begin to consider using Javascript until CSS2 is more > commonly supported. > > I do, however, suspect many folks on the list could substantially > improve the examples above. For what it's worth, both examples above > currently validate. > > Any suggestions, comments or browser-checks would be appreciated. I'd > like to see this actually work, or maybe somebody's already done it > better? > > Regards, > -- > Derek > -- Mitko Gerensky-Greene ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
