CSS - Test Your CSS Skills Number 27

[YuriKolovsky]

so you know, when i said multilevel (paul tipped me to that it was not yet a complete multilevel dropdown) i meant that it can have sub sub links (2 levels of sublinks), but currently one per sublinks for all browsers except ie5-7 (works fine in them with some extra contional comments in the head), also it currently requires extra css for the subsections, although thats also fixable.

also i made it work in opera... that pesky little browser.

[PicnicTutorials]

Uh-oh... looks like I'm guna win by default...?

[Paul O'B]

Uh-oh... looks like I'm guna win by default...?

Maleika is still working on a solution so you'll have to wait and see

[PicnicTutorials]

Maleika is still working on a solution so you'll have to wait and see

I know, just egging people on. Good luck Maleika! I'll be impressed...

[YuriKolovsky]

agh, god darn multilevel dropdowns with multiple multilevels per level!! eating away all my time and driving me nuts! (single multilevels work fine)
and believe it or not, but firefox and opera are the ones that refuse to play ball.

EricWatson
Uh-oh... looks like I'm guna win by default...?

Maleika had a solution that satisfies all the rules before you, although she is not completely satisfied with hers as its not usable in real life. [hint, hint] ;P

so to win hands-down you have to provide a solution that is usable in real life. xD

[RyanReese]

I'm pissed, I know I'm smart enough to do this but it's just not clicking ............

[deepM]

Completely newbie to CSS, but still following this thread since couple of days!! just curious to see the proper answer/design and winner too? seems its pretty tough one.

So Paul, when you are going to announce the winner? waiting for it.

[Paul O'B]

So Paul, when you are going to announce the winner? waiting for it.

I'll let it run over the weekend just to give everyone a chance and most likely the answer will be given on Monday.

I know a lot of people are interested to see the solution

[kohoutek]

I'm on it again. I have a few hours today and tomorrow and hope to check back into this thread with a result.

[PicnicTutorials]

Maleika had a solution that satisfies all the rules before you, although she is not completely satisfied with hers as its not usable in real life. [hint, hint] ;P

so to win hands-down you have to provide a solution that is usable in real life. xD

That's why I said by default. Does Maleikas solution flicker? If so, Ive got three other versions of those too, but I didn't send them in because that's not a working drop.

[YuriKolovsky]

i have made a working single level fixed width dropdown with no extra tags

here is the html i used to make it work.

<div id="navigation">
<ul class="nav">
<li class="link">
	<a class="main" href="#">Main</a>
	<ul class="sub">
		<li><a href="#">test1</a></li>
		<li><a href="#">test2</a></li>
		<li><a href="#">test3</a></li>
		<li><a href="#">test4</a></li>
	</ul>
</li>
<li class="link">
	<a class="main" href="#">Main</a>
	<ul class="sub">
		<li><a href="#">test1</a></li>
		<li><a href="#">test2</a></li>
		<li><a href="#">test3</a></li>
		<li><a href="#">test4</a></li>
	</ul>
</li>
</ul>
</div>

oh and its cross-browser and supports tabbing too.

notes:
no conditional comments at all, and only opera requires 1 extra css rule, no hacks used.
tested in opera, firefox, chrome, safari, ie5.5-ie8, but most likely works everywhere.

[kohoutek]

I've sent another version. It's better than the first attempt, I think.

[PicnicTutorials]

Good job Maleika!

[kohoutek]

Good job Maleika!

Thanks, Eric, but it's still not satisfying the rules. I'm still on it and I think I have a [Baldrick voice on]cunning plan[/Baldrick voice off].

[Paul O'B]

Thanks for the entry Maleika - it's getting better

Good work Yuriklovsky on the fixed width single level version. That's about as simple as it can get.

OK - I am going to drop a big hint for one way to solve this quiz so don't look at the following if you are still trying to solve this


I've already mentioned that I would float in and drop you a hint but I'll try to keep this vague and not related to a drop down but the effect is something you should be able to utilise.

Here is a 2 column floated layout that you have often seen but something has gone wrong in the second example and the right column isn't where it should be.

Only one single item was changed yet it has affected the whole block. Why is this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0
}
ul {
list-style:none
}
h1,h2{padding:5px;color:#fff;background:#000;text-align:center;font-size:140&#37;}
.outer {
width:600px;
margin:0 auto 20px;
border:1px solid #000;
background:#ffffcc;
overflow:hidden;
}
.left {
float:left;
width:299px;
height:400px;
background:red;
border:1px solid #000;
border-left:none;
border-top:none;
}
.links {
float:left;
}
.links a {
float:left;
width:300px;
background:blue;
color:#fff;
text-decoration:none;
border-bottom:1px solid #000;
clear:left;
}
.links a:hover {
background:#000;
}
.last {
width:301px;
}
h3{padding:0 5px}
p{margin:1em 0;padding:5px}
</style>
</head>
<body>
<div class="outer">
<h1>Example 1</h1>
<div class="left">
<h3>Left column</h3>
</div>
<ul class="links">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</div>
<div class="outer">
<h2>Example 2</h2>
<div class="left">
<h3>Left column</h3>
<p>Hmmm I only changed one of the links and now the whole block of links has moved! I wonder why?</p>
</div>
<ul class="links">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li class="last"><a href="#">link 5</a></li>
</ul>
</div>
</body>
</html>

Now all you have to do is utilise this behaviour to your advantage.

[YuriKolovsky]

i have just made the fixed width menu into a fully functional cross browser multilevel drodpown.
(i have 3 levels working), without any additional tags in the html.

<too much html to post, so just imagine some multi level lists >

[RyanReese]

That effect Paul, never seen it before xD...I'm gonna be gone for most of today so I'll just be on my way. Oh well . I'm gonna kill myself once I see results...

[YuriKolovsky]

haha i think you will.

edit:
this is how my multilevel dropdown looks so far.

[Paul O'B]

That effect Paul, never seen it before xD

What! You have never seen float drop before!

It happens all the time in IE especially if the inner content is greater than the parent float.

[RyanReese]

What! You have never seen float drop before!

It happens all the time in IE especially if the inner content is greater than the parent float.

lmao oh that's what it is-density of my head is amazing eh? I'm gonna just wait...I know when I'm beat.

[ryanhellyer]

Stu Nicholls just sent me two versions he's got working now too.

[YuriKolovsky]

Stu Nicholls just sent me two versions he's got working now too.

i guess this quiz made him realize its possible too, and he was unconvinced...meh.

i just hope he does not try and steal credit for my dropdown... that would be just evil of him.

p.s. what versions are they?

[stunic]

Have no fear, I am not that sort of person.
Congratulations in your pioneering work, you will get full credit for being the first to find this method. Just shows what some lateral thinkng can do.

My version uses no extra markup, no extra css even for Opera, no special css for IE6 and the second version has tab images for the top level with a hover change of image that persists.

Best wishes,
Stu

[YuriKolovsky]

Have no fear, I am not that sort of person.
Congratulations in your pioneering work, you will get full credit for being the first to find this method. Just shows what some lateral thinkng can do.

My version uses no extra markup, no extra css even for Opera, no special css for IE6 and the second version has tab images for the top level with a hover change of image that persists.

Best wishes,
Stu

thank you very much stu.
and nice to meet you by the way.

p.s. on the single level dropdown the background on the main also persists, multi level can be added too, but i did not bother as i was planning to change little things and add that in the end.

(i imagine you did massive work on the refinement of the idea, hearing how opera behaves without extra code)
does it support tabbing? and is it multilevel? and is it fluid or fixed width?

the only question that really interests me, is it fluid width multi-level? because that would be an achievement!


oh, you can probably take part in the quiz and pm paul your version and win the quiz hahaha

[Paul O'B]

Have no fear, I am not that sort of person.
Congratulations in your pioneering work, you will get full credit for being the first to find this method. Just shows what some lateral thinkng can do.

Thanks for dropping in Stu. I've been an admirer of your work for years

Yes, it's always nice to see something new and even things previously thought impossible can be done if someone just says "I can do it" and then we all realise that it can be done; and go out and find ways to do it.

I'll be posting the solutions late this evening to give everyone a little more time to think about it.