CSS - Test Your CSS Skills Number 19
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
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.
No Conditional Comments
No Scripting of any kind
No Nested anchors (or object, ins, del)
No Images or background images
Valid CSS 2.1
** 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 .
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: