CSS - Test Your CSS Skills Number 27 : Quiz now closed - Solution posted in post #126 (page 6)
[SIZE=4][SIZE=2]This week we have possibly the toughest quiz so far of all these quizzes and once again is something that was deemed impossible to do.
[SIZE=3][B]Yurikolovsky[/B][/SIZE] has come up with a way of making a single level drop down that works in IE6 without any javascript.
Whaaat! I hear you say “that’s impossible”.
That’s what I though until he told me he had a fully working version that uses valid html and css. As an exercise and before looking at his code I thought I’d give it a try and see if I could come up with something as I didn’t want to set a quiz that nobody could do. After a few hours of fiddling around I managed to get a version working in IE6 although it is a little buggy but it did show me that it was possible to do and that there were perhaps a few other ways this could be done also.
Look at the attached screenshot and you will see Yurikolvsky’s menu in its normal and expanded state (and also a screenshot of my attempt).
Your mission is therefore to create a single level drop down that will work in IE6 without javascript and also work in other browsers (though of course you can offer good browsers more advanced code etc).
The basic rules are:
valid css/html
no tables
no javascript
No expressions/behaviours etc
no conditional comments in the body of the html (conditional comments in the head of the page are acceptable )
No invalid nested anchors.
The top row of the menu should be a fluid width if possible although I will be lenient with the rules as this is a very hard task. The sub menus can be fixed width but I will be interested in any method that is working in some form or another.
You can use your own html but I will reproduce the html from my example as a starting point.
<div id="navigation">
<h1>IE6 only Demo</h1>
<ul class="nav">
<li><a class="target" href="#">Top Link1</a>
<ul class="sub">
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.yahoo.com/">Yahoo</a></li>
<li><a href="http://www.pmob.co.uk/">Pmob.co.uk</a></li>
<li><a href="#http://www.sitepoint.com/">Sitepoint</a></li>
</ul>
</li>
<li><a class="target" href="#">Top Link2</a>
<ul class="sub">
<li><a href="#1">Link1</a></li>
<li><a href="#2">Link2</a></li>
<li><a href="#3">Link3</a></li>
<li><a href="#4">Link4</a></li>
</ul>
</li>
<li><a class="target" href="#">Top Link3</a>
<ul class="sub">
<li><a href="#1">Link1</a></li>
<li><a href="#2">Link2</a></li>
<li><a href="#3">Link3</a></li>
<li><a href="#4">Link4</a></li>
</ul>
</li>
<li><a class="target" href="#">Top Link4</a>
<ul class="sub">
<li><a href="#1">Link1</a></li>
<li><a href="#2">Link2</a></li>
<li><a href="#3">Link3</a></li>
<li><a href="#4">Link4</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">
<p>This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : This is some following content : </p>
</div>
The above html is all that I needed for my example but as I mentioned already my example is a bit buggy and extra elements are used in Yurikolovskys example which makes it work flawlessly.
NOTE:I know there is a clever version out there by Stu Nichols that doesn’t use any javascript but Stu’s version relies on the fact that a table is nested inside an anchor which is invalid. To make it valid the nested code is hidden using conditional comments in the html but in essence the code is still invalid but just hidden from the validator. It also means that the html is more complicated because of all the extra table tags and conditional comments on every level.
That’s the reason that I have not allowed any conditional comments in the body of the html and that the html must indeed be valid html and you can’t just nest anchors.
Oh and if you want to add tab support to the menu and it’s drop down then feel free
[edit]
Here are some additional comments from Yurikolovsky that may aid with your task.
[/edit][/SIZE][/SIZE][edit]
i would also give the structure of this quiz, because
essentially its 1 big quiz consisting out of (at least) 4 little quizzes
to start: this is the dropdown
MAIN LINK
sublink
sublink
sublink
1.- getting the main link to move the sublinks
2.- getting the sublinks to move the sublinks
3.- hiding the dropdown links when the main link is not being hovered
4.- maintaining a background on the main link when the sublinks are being hovered (initially i thought this would be impossible)
[SIZE=4][SIZE=2]
[/SIZE][/SIZE][/edit][SIZE=4][SIZE=2]
Any questions or if anything is unclear just ask and remember this is just for fun (although this solution will indeed be a workable solution for IE6)
[/SIZE][/SIZE]Solutions to the quiz will be posted at the end of 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: [URL=“http://www.sitepoint.com/forums/showthread.php?t=169710”]test 2: [URL=“http://www.sitepoint.com/forums/showthread.php?t=170190”]test 3: [URL=“http://www.sitepoint.com/forums/showthread.php?t=171221”]test 4: [URL=“http://www.sitepoint.com/forums/showthread.php?t=172472”]test 5: [URL=“http://www.sitepoint.com/forums/showthread.php?t=173786&highlight=test+css+skills”]test 6: [URL=“http://www.sitepoint.com/forums/showthread.php?p=3216244#post3216244”]test 7: [URL=“http://www.sitepoint.com/forums/showthread.php?p=3235664#post3235664”]test 8: [URL=“http://www.sitepoint.com/forums/showthread.php?p=4108145#post4108145”]test9: [URL=“http://www.sitepoint.com/forums/showthread.php?p=4119063#post4119063”]test10: [URL=“http://www.sitepoint.com/forums/showthread.php?t=595943”]test11: [URL=“http://www.sitepoint.com/forums/showthread.php?t=597256”]test12:
test13: [URL=“http://www.sitepoint.com/forums/showthread.php?t=600332”]test 14: [URL=“http://www.sitepoint.com/forums/showthread.php?t=601564”]test 15: [URL=“http://www.sitepoint.com/forums/showthread.php?t=602808”]test 16: [URL=“http://www.sitepoint.com/forums/showthread.php?t=604228”]test 17:[URL=“http://www.sitepoint.com/forums/showthread.php?t=605819”]test18 [URL=“http://www.sitepoint.com/forums/showthread.php?p=4218017#post4218017”]test 19:
test 20 [URL=“http://www.sitepoint.com/forums/showthread.php?t=611825”]test 21: [URL=“http://www.sitepoint.com/forums/showthread.php?t=615364”]test 22:[URL=“http://www.sitepoint.com/forums/showthread.php?t=617015”]test 23 :[URL=“http://www.sitepoint.com/forums/showthread.php?t=618512”]test 24 : [URL=“http://www.sitepoint.com/forums/showthread.php?t=626405”]test 25: [URL=“http://www.sitepoint.com/forums/showthread.php?t=630173”]test 26