CSS - Test Your CSS Skills Number 19

[Paul O'B]

CSS - Test Your CSS Skills Number 19 : Quiz ended - see solution in post #59

Time to roll out a new quiz and although this may seem similar to recent quizzes it has in fact got nothing in common with them

Your task this week is to imitate a drop down menu that works when you click the top level menu to reveal the sub menu items. That sounds easy enough but you are not allowed to use any javascript or scripting of any kind and this layout must work in IE6. (I'm not interested in other browsers but my example works in all except Opera.)

First take a look at the attached image clickdrop.png which shows several screenshots of the menu in different states.

Each sub menu is made visible by clicking the top level menu and each is revealed in turn as you click along the row. The previous submenu should disappear when you click a new menu item on the top level. The submenu is persistent in that it is not a hover effect and you can move the mouse away and the menu still stays in place (neither is it an :active or :focus effect).

To clear the last viewed menu from the screen a close menu button is placed at the end which returns the menu to its original collapsed position when clicked. (A close button is needed because the menu will not disappear if you click the same menu item again.)

All the submenu links should be clickable and send you to the correct location should they be clicked.

Just study the screenshots to see the exact positions but it is a pretty straight forward example.

Rules:

No Hacks
No Conditional Comments
No Scripting of any kind
No Nested anchors (or object, ins, del)
No Images or background images
Valid CSS 2.1
Valid HTML

** Most importantly it Must work in IE6 **

Use your own HTML and CSS but it must be valid. If you can improve on my version and give it better functionality then by all means do.

Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

Any questions just ask and remember this is just for fun

Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
test13: test 14: test 15: test 16: test 17:test18:

[YuriKolovsky]

me posting something

awww dropdowns!!!

[Paul O'B]

Have you solved it already

[Paul O'B]

me posting something

awww dropdowns!!!

Don't be put off the fact that it's a dropdown as the technique is useful for many other things. Besides there is no other dropdown that works like this in the world.

[YuriKolovsky]

no haven't even started
i will do it though

i have "some" ideas

[Skipt]

The clicking part is what is giving me trouble...Its definately not CSS3 for IE6..and no javascript...

[Paul O'B]

Yes the clicking on the link is the important part and this is not a hover effect and neither is it an :active or :focus effect.

There's no CSS3 and there's no javascript or any hacks of any kind.

W3C CSS Validator results for file://localhost/TextArea (CSS level 2.1)

Congratulations! No Error Found.

This document validates as CSS level 2.1 !

It's straight forward html/css but does need some lateral thought.

The quiz is aimed at IE6 but the technique will work in all other browsers except Opera for some strange reason.

[Skipt]

Gah Just saw the part of no CC's. That now makes me fail in ie6..clicking...

[RyanReese]

Interesting quiz..

[danNL]

Hmm ... I've got something but it's definitely not what I'd call ideal ... shall I post it here or via PM until the contest is over?

[RyanReese]

You can PM paul but make sure it adheres the the rules-aka work in IE6 also.

[Paul O'B]

Hi,

Just had a very close entry from DanNL that very nearly fits the bill (visually at least) so well done

You are on the right track with the method but no need to have duplicate content.

[RyanReese]

No :active/:focus...? I can't do it..Let me look at other pseudo classes...

[zcorpan]

LOL I think I know how you did it.

Now I just wonder why it wouldn't work in Opera...

[YuriKolovsky]

ok now im officially stumped xD

[Paul O'B]

Ok here's a little clue but don't look if you want to work it out for yourselves.


What method allows you to click an anchor and still stay on the same page but reach other content.

[YuriKolovsky]

i read the clue because i am completely out of ideas, and after reading the clue, im still stumped!! hahahaha, i really have no idea, maybe after a couple of hours of thinking ill think up something.

edit:
wait a minute, i think i know how to do this, but honestly, is it as complex and non-real life as i think it is???

[Paul O'B]

but honestly, is it as complex and non-real life as i think it is???

No the idea is the most basic html that you ever learned (probably in your first lesson about using anchors).

The css is only needed to create the visual effect.

[YuriKolovsky]

hahahah just got my prototype working (but only in firefox) its a very clean version
very tricky business

edit:
just got it working in all browsers except opera xD

[Paul O'B]

Well done Yurikolovsky you are on the right track as well and just need to tidy it up to look and behave like my original

[RyanReese]

Uhh...what method...still stumped...target pseudo class...IE doesn't support....wtfack I don't get it at all lol. What method...................#.........stumped.

[Paul O'B]

I have a correct solution from danNL - well done

[Paul O'B]

Uhh...what method...still stumped...target pseudo class...IE doesn't support....wtfack I don't get it at all lol. What method...................#.........stumped.

Another clue:

(Please don't read this if you want to solve it by yourself)


<a href="#here">link</a>
...
...
...
<li id="here">Somewhere else</li>

[YuriKolovsky]

im no reading any mor cluez, i already getting it to work

[RyanReese]

I figured that much Paul but I never done anything like that before :O