The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS - Test Your CSS Skills Number 17

This weeks quizzes give you the chance to get to grips with the ubiquitous drop down menu and show us what you can do.

There are again 2 quizzes this week and both are based on drop down menus.

The first quiz (supplied by Erik J) is to create a drop down without using any absolute positioning at all!

The second quiz (supplied by Eric Watson) is more straight forward but will still send you around in circles.

QUIZ A - (Erik J)

Take a look at the attachment called dropdown-no-abs.png to get a feel of what's required. There are also some browsershots of the layout so you can see various options. There is also an image attached which you must use for the round corners (dcade1274e.gif).

This is more or less a normal drop down except that it uses no absolute positioning but still works in the same way and the drop downs overlaps following content without pushing it away.

The top level menu items have no width and the submenu items will be as wide as the longest item in the submenu (see attachment for clarification).

This needs to work in IE6, IE7 , FF2+ (and other modern browsers) and you are allowed to use the star-html-hack for IE6 and the drop down JS (supplied).

General Rules.

1) No absolute positioning -but the drop downs must have no effect on other content other than overlapping it.

2) Both top level and submenu text are flexible in width and only as wide as the widest link. (check dropdown-no-abs.png)

(The background of the submenu should be a solid color matched to the widest link of course.)

3) Text is resizable but of course the round image is only resizable horizontally. The text should be perfectly centred vertically.

This quiz is another drop down and if you look at the attachment dropround.png you will see a series of screenshots of what happens as each new menu is opened until finally the whole sequence is finished with a red message in the center.

This quiz will test your ability on handling multiple nested lists and although it is quite straight forward you will still need to keep an eye on things.

The little arrow effect in each corner is CSS and not an image and indicates where the next submenu will appear (see previous quizzes if you don't know how this arrow is created).

This time instead of using the JS script for IE6 try using the csshover.htc file to allow IE6 to hover elements other than anchors.

I dont think I need to explain any more than this (because some of you don't read it anyway ) but if you have questions then ask.

I have only supplied the top level menu as a start but you can change the html to add all your nested lists as required. The html must remain valid of course and work in IE6 - 7 and other modern browsers.

Quiz A is tricky! Off the top of my head, I don't see any way to do it? But I won't stop thinking (that's the problem!).

For an added level of difficulty for Quiz B, you could try and make the containers (ul/li) height all fluid (in em). Going down is easy (that's how I originally had it), but coming up, and when you zoom in, it starts to get misaligned. I don't even know if that's possible (didn't even try)? But it would be cool if it was...

No don't use any absolute positioning. I left the example in the picture to show that the menu will act the same as an absolutely positioned menu.

Originally, I was going to allow a normal absolute version for Quiz A but then I added Quiz B which allows you to do it the normal way anyway so it defeated the purpose to have more options on the first quiz.

Quiz B, I can't get the hover on level three work in IE6. Works perfect in all other browsers.

I have tried csshover.htc version 1.42 and 2 and 3 without getting passed second dropdown.

Should I submit it as it is?

Funny, I ran across the same thing, on the 3rd drop, but in IE7. Fixed it though!

Man this quiz A is tough (for me at least!). I've never done the single image swap thing before. Time for Google! "If" I ever figure that part out, then on to the no absolute drop that doesn't move anything below it. Not a clue? Yeah - tomorrow...

i sent my attempt at B,
it is my very first drop down menu, and i now remember why i avoided them for so long,
they are very annoying when trying to select something!
one level drop down menu is fine, but anything more is too much.

so yeah, very hard quiz, my version is crappy, ill love to see the proper way of doing it (i just hope its not as messy as mine)

now all i have to do, is quiz A, i just can't figure out how to get ie6 to not expand to the list's contents...