CSS - Test Your CSS Skills Number 39 - dropdown arrows: Quiz now ended: Solution in post #32
On my CSS “wishlist” is the “parent selector” that would give you the ability to style the parent of a child using the child as the reference. Or similarly the ability to style a parent element based on the child element that it contains. Alas there is no such thing in CSS - yet.
That’s all well and good but where is that leading us?
In this quiz I will be asking you to perform the above feat in some respects in that I want you to automatically add indicator arrows to show that the item contains a dropdown menu. Essentially if a list element contains a dropdown menu then show an arrow.
It may be easier to look at the attachment first so you can get an idea of what I am talking about.
Are you back yet? Good lets begin.
You can see that the arrow is only showing on elements that contain dropdowns which is a good visual aid and helps differentiate between elements that don’t have dropowns attached.
The puzzle is to add these arrow icons automatically so that if the menu items are changed and flyouts removed or added to different items then the indicator arrows would automatically reflect this change without the need to change any css or html.
Also the arrow should change colour when items are hovered as shown in the attachment.
You can use your own css but the html between the body tags must remain untouched.
Here is the starting code:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Test</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">testing</a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">testing</a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="http://www.pmob.co.uk">PMOB</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
To save you re-inventing the wheel you can find basic css for dropdowns from the original suckerfish site, or from one of [URL=“http://www.pmob.co.uk/temp/drop-down-basic-good.htm”]my old demos, or perhaps even from Jason’s (Deathshadow) clever [URL=“http://www.cutcodedown.com/codeExamples/menuDemo/template.html”]overflow version.
Rules
There are always rules 
[B]Must work in IE8+ and modern Safari, Chrome, Firefox and Opera (don’t bother with ie7 and under).
Assume that only three levels of menus exist as per the attachment (any more than that is nonsense anyway most of the time).
Remember that the menu order could change and the flyouts added or removed so you can’t rely on sub menus being the third element along or down etc ( e.g. this won’t work li + li + li{}). You must make your code cope automatically.
Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).
No scripts of any kind (unless you want to add support for IE7 and under because you found this quiz too easy).
You can use whatever CSS rules you like but the html must be untouched and no extra elements added.[/B]
I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won’t necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).
Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.
PS. : In case you missed the other tests you can find them all listed here:
