I’ll admit that i am good with CSS but i have spent the last day and today trying to work this one out, i have only ever added arrows using classes and trying to work out how to do it with just CSS is killing me so to speak.
I think i just finished trying method 3 and still fail to see how this is even possible 
Keep trying Chris and you will soon get what I am after 
A couple of you are stumped so I’ll start handing out some clues to point you in the right direction.
The indicator arrow needs to be added somewhere but there are no actual “hooks” for it so where do find a place to hang the arrow (which doesn’t have to be an image if you are good at border art - although the technique is the same)?
The only thing that you know for certain is that when a parent list has a nested ul then the arrow should be shown.
<li>
<ul> …
</ul>
</li>
Therefore as I indicated at the start the parent selector would be a useful addition to the css repertoire as we could then target the parent of a nested ul and and add the arrow to it. As that property doesn’t exist the only constant we have is the nested ul.
Therefore you must find a way using the nested ul as your target and then place the arrow into position from there. That means the arrow will only show when there is a nested list which is exactly what we want.
The next step would be to find a pseudo element that will allow you to add extra content. The final step would be working out how to position it in the right place from the ul and then changing it on hover.
I’ve used a spoiler tag in case you didn’t want to see the clues (just highlight the area with the mouse to read the spoiler text).
Thanks for the hint Paul, i think i finally have it
Well done Chris that’s it Hope you had fun tearing your hair out
You bet i did, never before have i had such a struggle with CSS. I guess it was because i always uses classes and id’s but now i know things can be done other ways.
Was good to be part of this challenge and look forward to the next one.
Nice challenge, Paul! PM Sent!
Thanks and well done as you have the correct answer also.
Thanks for taking part and hope you had fun also.
Yes, really enjoyed this challenge! Can’t wait for the next one!
Last chance for any more entries as I’ll wrap this up tomorrow and start a new one
I’m looking forward to learn how it is done… since I never got it to perform correctly and only partially so obviously I’m missing something!
Solution Time
OK time to wrap this up now. I hope you enjoyed it and maybe learned something new in the process or perhaps honed your css skills a little more
We’ve had a number of entries and all used similar techniques and it was hard to choose a winner but I’ve decided that Remon (ScallioXTX) should be awarded first place this time. Well done Remon :).
Congratulations also to all these who also had the correct answers.
ralph.m, dresden_phoenix, Yurikolovsky, CletusSpuckler, SgtLegend, TheRaptor.
(If I’ve missed anyone then please shout and I’ll add you to the list.)
How’s It Done?
I more or less gave the answer away in one of the clues earlier but the secret to the quiz was that its not possible to style a parent a list based on its child but we could style the child instead.
You may think that perhaps that would be no use but we use the child element and add some pseudo content for our arrow and then we position the arrow back into the parent list.
All we need to know is that the structure will always have a nested ul so to target only lists that have children we simply target li ul:before{content:“”; etc…}. The rest is just calculating where to place the arrow depending on the method we used to hide the ul. For the arrow itselfyou could use background images or you could use mitred borders to create the arrow effect.
If you used the off-left method to hide the dropdown then the arrow has to be offset from that hiding position to bring it back on screen. On hover the ul is brought back on screen so we must once again offset the arrow position to match.
If you used the overflow method of hiding the dropdown then the calculations are easier because nothing is moved off screen and you only need to place the arrows where they need to be.
Some of you may have tried the display:none method of hiding the nested ul but that would make the arrow invisible and therefore no use for this quiz as you can’t make a child display when its parent is display:none (although the same isn’t true when using visibility:hidden and that method would have been ok).
For the eagle eyed among you may have seen in earlier posts that I have offered this solution a couple of [URL=“http://www.sitepoint.com/forums/css-53/apply-css-style-parent-only-if-there-child-elements-769295.html”]times anyway.
Solutions:
Here’s my original solution but I have added an expression (borrowed from Jason in another thread) to give IE6 and 7 the nice little arrow like other browsers (the javascript in the head is just for ie6’s lack of hover).
<!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" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
body {
font: normal 11px verdana;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-999em;
}
#nav li li{width:149px;}
#nav li ul ul{
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}
/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fffccc; /* IE6 likes a background here */
padding: 5px 2em 5px 5px;
border: 1px solid #ccc;
zoom:1.0;
}
/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #777;
background: #fffccc;
}
#nav li ul li a {
padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}
ul#nav li ul:before,
ul#nav li ul .before{
content:"";
display:block;
position:absolute;
top:-1.3em;
left:999em;
right:0;
margin-left:127px;
width:0;
height:0;
z-index:9999;
border-left:.5em dashed transparent;
border-right:.5em dashed transparent;
border-top:.5em solid red;
clear:both
}
ul#nav li:hover ul:before,
ul#nav li:hover ul .before,
ul#nav li.over ul .before{
margin-left:0;
right:1em;
left:auto;
border-top:.5em solid #fff;
}
ul#nav li:hover li ul:before,
ul#nav li:hover li:hover li ul:before,
ul#nav li:hover li ul .before,
ul#nav li:hover li:hover li ul .before,
ul#nav li.over li ul .before,
ul#nav li.over li.over li ul .before{
margin-left:997.5em;
left:0;
right:auto;
top:.7em;
border-left:.5em solid red;
border-bottom:.5em dashed transparent;
border-top:.5em dashed transparent;
overflow:hidden;
height:0;
}
ul#nav li:hover li:hover ul:before,
ul#nav li:hover li:hover li:hover ul:before,
ul#nav li:hover li:hover ul .before,
ul#nav li:hover li:hover li:hover ul .before,
ul#nav li.over li.over ul .before,
ul#nav li.over li.over li.over ul .before{
border-left:.5em solid #fff;
left:-1.5em;
margin-left:0;
}
ul#nav li ul{
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML('beforeEnd','<span class="before"></span>')
);
}
</style>
</head>
<body>
<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>
</body>
</html>
Remon:
<!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" xml:lang="nl" lang="nl">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body, html {
margin: 0;
padding: 0;
}
body {
margin: 30px;
font: 0.75em Arial;
}
/** default menu styling **/
#nav, #nav ul, #nav li {
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
}
#nav a {
display: block;
text-decoration: none;
color: #777;
font-size: 12px;
width: 135px;
padding: 6px;
}
#nav li {
background: #ffffcc;
border: 1px solid #ccc;
float: left;
}
/** hide fly-outs initially **/
#nav li ul {
position: absolute;
top: -1000px;
}
/** fly-out styling **/
#nav ul li {
display: block;
float: none;
}
/** arrows **/
#nav > li > ul:after {
display: block;
position: absolute;
top: 1010px;
right: 5px;
border-style: solid;
border-width: 6px;
border-color: red #ffffcc #ffffcc #ffffcc;
content: '';
}
#nav > li li > ul:after {
display: block;
position: absolute;
right: 2px;
top: 1007px;
border-style: solid;
border-width: 6px;
border-color: #ffffcc #ffffcc #ffffcc red;
content: '';
}
/** show fly-outs on hover **/
#nav li:hover > ul {
position: absolute;
top: 100%;
left: -1px;
}
/** hover styling **/
#nav li:hover > ul {
display: block;
}
#nav li:hover {
background: #ff0000;
}
#nav li:hover > a {
color: #ffffcc;
}
#nav li li:hover > ul {
position: absolute;
left: 100%;
top: 0;
}
#nav li li:hover > ul:before {
position: absolute;
left: 100%;
top: 0;
}
/** hover arrows **/
#nav > li:hover > ul:after {
display: block;
position: absolute;
top: -16px;
right: 5px;
border-style: solid;
border-width: 6px;
border-color: #ffffcc red red red;
color: #fff;
}
#nav > li li:hover > ul:after {
opacity: 1;
display: block;
position: absolute;
left: -12px;
top: 7px;
border-style: solid;
border-width: 6px;
border-color: red red red #ffffcc;
width: 0;
height: 0;
color: #fff;
}
</style>
</head>
<body>
<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>
</body>
</html>
ralph.m
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arrows</title>
<style media="all">
/* PMOB dropdown styles
--------------------------------------------- */
body {
font: normal 11px verdana;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-9999px;
}
#nav li li{width:149px;}
#nav li ul ul{
position: absolute;
left:100%;
top: -.1em;
margin-left:-9999px;
}
/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fffccc; /* IE6 likes a background here */
padding: 5px;
border: 1px solid #ccc;
zoom:1.0;
}
/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #777;
background: #fffccc;
}
#nav li ul li a {
padding: 4px 5px;
}
/* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-9999px;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}
/* RM hover styles
--------------------------------------------- */
#nav li ul:before, #nav li li ul:before {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-width: 5px;
content: ' ';
}
#nav li ul:before {
border-top-style: solid;
border-top-color: #f00;
border-bottom-style: solid;
border-bottom-color: transparent;
border-left-style: solid;
border-left-color: transparent;
border-right-style: solid;
border-right-color: transparent;
}
#nav li li ul:before {
border-top-style: solid;
border-top-color: transparent;
border-bottom-style: solid;
border-bottom-color: transparent;
border-left-style: solid;
border-left-color: #f00;
}
#nav li li ul:before {
top: 9px;
left: 9986px;
}
#nav li ul:before {
top: -16px;
left: 10130px;
}
#nav li:hover > ul:before {
border-top-color: #fff;
left: 131px;
}
#nav li li:hover > ul:before {
left: -13px;
border-left-color: #fff;
border-top-color: transparent;
}
</style>
</head>
<body>
<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>
</body>
</html>
dresden_phoenix
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title></title>
<style type="text/css">
body {
font: normal 11px verdana;
}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-999em;
}
#nav li li{width:149px;}
#nav li ul ul{
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}
/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fffccc; /* IE6 likes a background here */
padding: 5px;
border: 1px solid #ccc;
zoom:1.0;
}
/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #777;
background: #fffccc;
}
#nav li ul li a {
padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul,u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}
li:hover a +ul:after {content:"^"; vertical-align: middle; line-height: 2.15; background: orange; position: absolute; top:-2.2em; left:0;right:auto; margin-left:139px}
li a +ul:after {content:"<"; vertical-align: middle; line-height: 2.15; background: orange; position: absolute; top:-2.2em; left:139px; margin-left:999em;}
li:hover li:hover a +ul:after, li:hover li:hover li:hover a +ul:after {content:"^"; vertical-align: middle; line-height: 2.15; background: orange; position: absolute; left:auto;right:100%; margin-left:0}
li:hover li a +ul:after, li:hover li:hover li a +ul:after {content:"<"; top:1px; vertical-align: middle; line-height: 2.15; background: orange; position: absolute; left:1px;right:auto; margin-left:998em}
</style>
</head>
<body>
<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>
</body>
</html>
Yurikolovsky
<!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>YuriKolovsky - CSS Quiz 39</title>
<style type="text/css">
ul {
margin:0;
padding:0;
list-style:none;
}
#nav {
height: 24px;
}
#nav li {
float:left;
background:#FFFFCC;
color:#777;
}
#nav a {
color:inherit;
width:147px;
display:block;
border:solid 1px #ccc;
font-size:13px;
font-family:arial;
padding:3px;
text-decoration:none;
}
#nav li li {
clear:both;
}
#nav {
position:relative;
}
#nav li {
position:relative;
}
#nav ul {
position:absolute;
}
#nav ul ul {
left:100%;
margin-top:-24px;
background:blue;
}
/*I like this deathshadow method*/
#nav li {
overflow:hidden;
}
#nav li:hover {
overflow:visible;
}
#nav li:hover {
background:red;
color:#fff;
}
#nav li:hover {
background:red;
color:#fff;
}
#nav ul:before {
display:block;
content:" ";
width:0;height:0;
position:absolute;
z-index:1;
top:-14px;
left:138px;
border: dashed 5px transparent;
border-top: solid red 5px;
}
#nav li li ul:before,
#nav li li:hover li ul:before {
top:8px;
left:-12px;
border: dashed 5px transparent;
border-left: solid red 5px;
}
#nav li:hover ul:before {
border-top-color:#fff;
}
#nav li li:hover ul:before,
#nav li li li:hover ul:before {
border-top-color:transparent;
border-left-color:#fff;
}
</style>
</head>
<body>
<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>
</body>
</html>
CletusSpuckler
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - Test Your CSS Skills Number 39 - dropdown arrows</title>
<style>
body {
background: #fff;
color: #000;
font: 14px/1.5 sans-serif;
}
#nav,
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
position: relative;
width: 140px;
}
#nav > li {
float: left;
}
#nav ul {
left: -9000px;
position: absolute;
}
#nav ul ul {
top: 0;
}
#nav li:hover > ul {
left: 0;
}
#nav ul li:hover > ul {
left: 140px;
}
#nav a {
background: #ffc;
color: #000;
display: block;
padding: 6px;
text-decoration: none;
}
#nav a:hover,
#nav li:hover > a {
background: #d0dde0;
}
#nav a + ul:before {
border: 6px solid transparent;
border-top-color: #000;
content: "";
height: 0;
left: 9124px;
position: absolute;
top: -18px;
width: 0;
}
#nav ul a + ul:before {
border-top-color: transparent;
border-left-color: #000;
left: 9128px;
top: 10px;
}
#nav li:hover > a + ul:before {
left: 124px;
}
#nav ul li:hover > a + ul:before {
left: -12px;
}
</style>
</head>
<body>
<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>
</body>
</html>
TheRaptor
SgtLegend
zip here
Thanks to all the above for taking part and making this an interesting quiz.
Watch out for the new quiz which will follow tomorrow.
Thanks for posting the explanation and solutions, Paul. It’s fascinating to compare answers.
Indeed it was, its nice to see more correct answers for myself as it helps to see why i struggled so much with something so simple 
I’ll need to study this a little. Although my approach was very similar, it didn’t work properly. Close, but not well enough. I even targeted a+ul to style, and I used :before!
I need to compare my no-solution with the real one