CSS - Test Your CSS Skills Number 27

Ugh internet effed up.

Check your inbox, I have it stay open though not what readers might think-I need to know if I'm on the right track.

So far owrks everywhere but Opera.

I have tried solving this fantastic quiz. Two pretty lame 1/8 solutions came of it. The first attempt allowed the sublinks to stay open, but they wouldn't close again upon moving away the mouse. The second attempt allowed only for the first two links on hover to work as intended where the other remaining links would shut down the entire sub menu again.

I haven't a clue whether I have been right with either two methods, but I'm going to give it another try. I'm still waiting for it to "click" in my brain. So far, nothing has really clicked. My brain is suspiciously quiet. That is a common problem of mine. Hahaha. *back to experimenting*

Quote:

---

Originally Posted by kohoutek

I have tried solving this fantastic quiz. Two pretty lame 1/8 solutions came of it. The first attempt allowed the sublinks to stay open, but they wouldn't close again upon moving away the mouse.

---

Which had me stumped as I knew a different method would be needed

Quote:

---

The second attempt allowed only for the first two links on hover to work as intended where the other remaining links would shut down the entire sub menu again.

---

Sounds like you were close..very close. If it worked for two you would probably just have to change a value or two and you would be good

Maybe. I can't really tell. However, what has me even more suspicious is the fact that it doesn't work in modern browsers. I have taken Paul's advice to code this in IE6, and only occasionally looked at it in other browsers. Perhaps feeding modern browsers common methods will solve that issue, but I'm somewhat fixated on IE6 right now.

This is tons of fun but I am swimming in a sea of hair I've been tearing out for the last couple of hours. I am not going to give up this quickly though.

Perhaps once this quiz is done you can PM me that code, I'm a bit interested right now ;P.

People ask me why I have semi long hair-it's for occassions like this where I lose some xD.

Well, I've got the hover effect to work for all sub links and the sub menu disappears when the mouse moves out of focus as intended. Not very stable though and lots of flickering. So back to the drawing board.

The fixed width version (that I supplied the html for a couple of posts back) works in all browsers without any hacks or forking of the code. Yuri's original fluid width top level version does take a bit more work to do though and does need some different code for various browsers.

There is no flickering at all in the drop downs and you wouldn't know that it wasn't a normal drop down from using it.

If you are still struggling tomorrow I may offer a big clue to help but some people are still trying to solve it on their own.

I have littered a few clues throughout the posts.

Most of you can make the menus appear ok but can't find a way to keep the menu open so that anything can be selected.

What you should be looking for is some mechanism where hovering on one sub link keeps all the other sub links visible. You have seen this effect many times in your layouts (and probably cursed it) so now its time to utilise it.

Quote:

---

Originally Posted by kohoutek

I have tried solving this fantastic quiz. Two pretty lame 1/8 solutions came of it. The first attempt allowed the sublinks to stay open, but they wouldn't close again upon moving away the mouse. The second attempt allowed only for the first two links on hover to work as intended where the other remaining links would shut down the entire sub menu again.

I haven't a clue whether I have been right with either two methods, but I'm going to give it another try. I'm still waiting for it to "click" in my brain. So far, nothing has really clicked. My brain is suspiciously quiet. That is a common problem of mine. Hahaha. *back to experimenting*

---

very nice work kohoutek, both of your solutions i have seen, and both of them can be made to work (at least one of them according to paul, as its similar to his first version).

Quote:

---

Maybe. I can't really tell. However, what has me even more suspicious is the fact that it doesn't work in modern browsers. I have taken Paul's advice to code this in IE6, and only occasionally looked at it in other browsers. Perhaps feeding modern browsers common methods will solve that issue, but I'm somewhat fixated on IE6 right now.

---

paul gave you excellent advice, stick to ie6.
although pauls simplified version works in all browsers using the same css.

Quote:

---

This is tons of fun but I am swimming in a sea of hair I've been tearing out for the last couple of hours. I am not going to give up this quickly though.

---

:D

Quote:

---

Well, I've got the hover effect to work for all sub links and the sub menu disappears when the mouse moves out of focus as intended. Not very stable though and lots of flickering. So back to the drawing board.

---

that is very good, send me your current version, i would love to see what you have so far, sounds like you need to add a rule or two and your the first one to solve this.

Quote:

---

Ryan
People ask me why I have semi long hair-it's for occassions like this where I lose some xD.

---

i have very very long hair... xD


a question to those who are trying to solve this:
how many of you want a big hint from paul? and how many still want the challenge of solving it without help?

I have two versions (using completely different code), one that I can't keep open, and one that stays open, but I can't close. Both I've taken as far as my brain will allow.

Yuri, I will send you what I sent Paul. It is horrible code though and the hovers work badly. Very badly. Like I said, tons of flickering. Paul said it was the best entry so far (*pride, pride!*) but also that I've probably entered an impasse. Well, Paul is still alive after having seen the code. I hope you won't drop dead either. So view the code at your own peril. I don't want to be responsible for any possible ill effects. :eye:

Anyway, I want to continue to try and solve this. It hasn't clicked yet, but I'm working on a new approach now, hopefully effectively being able to make use of IE6's bugs.

As for hints, personally, I don't want any more. More hints would defeat the joy in doing this. For me anyway. Maybe they could be put in spoiler tags or made so that those of us who don't want any more aids can't see them if we don't want to?

This is so bizzare... there is so much work I have to do and yet I'm stuck with this quiz and don't want to stop until I know. Pleasure before business. I've got it backwards. :)

Quote:

---

and probably cursed it

---

Gee, things that make me curse IE... that narrows it down! :D

<spoiler> hasLayout? </spoiler>

Too bad I'm running behind on work, I have an idea in my head of how it could work just not enough time to mess around with it. Maybe later tonight I'll have a few drinks and see if I can come up with something.

Quote:

---

<spoiler> hasLayout? </spoiler>

---

<hint>no (not what paul meant)</hint>

Ok - We won't drop anymore hints until you all give up :)

I did it! :D

I definitely just stuck a square peg into a round hole! Not exactly the solution I was hoping to find, but it does satisfy the rules of the quiz. After at east 10 hours of messing with it, it will have to do. I didn't bother making it work in good browsers. I only submitted an IE6 version.

Hurray, Eric! Congrats. :) :) :)

I'm still sitting on it, literally.

Well done Eric the solution does work in IE6 :)

It's not the definitive solution we were looking for but it's a good attempt at lateral thinking. The real solution is actually easier to implement ;)

Thanks to all who are still working on this and I know that Maleika has been very close to an answer also.

Quote:

---

Originally Posted by kohoutek

Hurray, Eric! Congrats. :) :) :)

I'm still sitting on it, literally.

---

Thanks! It's not all that though. All I did was fake it. But, even that was incredibly hard.

hahaha, good solution Eric! it looks and works exactly like a real dropdown...visually.

getting very original and working in ie6 solutions so far, shows that there are a lot of thinkers in here. :D

Quote:

---

Originally Posted by Paul O'B

If no one offers anything close by tomorrow we'll drop some bigger hints.:)

However we were hoping that people would come up with their own new ways to do this now that they know it's possible. There are a number of possible solutions (although some are better than others) and as yuri just mentioned a fixed with menu can be done with this minimal html (the css of which is based heavily from Yuris original idea and works in IE, Safari3+ and FF3+ using the same code with no hacks or forking of code).

Code:

---

<ul class="nav">
        <li><b></b><a class="main" href="#">Main 1</a>
            <ul>
                <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>
</ul>

---

That's enough help for today :)

---

I just noticed the "b" is sitting outside the anchor. That gives me some more ideas to try! It's just that one "b", no other "b" needed right?

Quote:

---

I just noticed the "b" is sitting outside the anchor. That gives me some more ideas to try! It's just that one "b", no other "b" needed right?

---

yea, pretty much, for the fixed width version at least.

after 2 hours of fiddling with the fixed width dropdown, I have made it into a multilevel dropdown that works in ie5-6.

ok, now the fixed width multilevel dropdown works in all browsers except Opera.

i mean the links are clickable (if you add a couple of lines of css) in opera, only the hover background is messing up (sometimes not appearing), but its completely usable.

I hope this quiz will stay open over the weekend. I haven't gotten around to finishing my ideas as I had to do client work. *keeps fingers crossed*

Good work Timo (Yurikolovsky) :)

Yes we'll leave the quiz open over the weekend when people may have a bit more time to have a go.

Quote:

---

Originally Posted by YuriKolovsky

after 2 hours of fiddling with the fixed width dropdown, I have made it into a multilevel dropdown that works in ie5-6.

---

LMAO. I have no idea where to even start to get a multi-level dropdown!

I assumed that was impossible - but then I also assumed doing a simple dropdown was also impossible, so go figure! ... that god analogy is becoming more fitting all the time.