Arrow under navigation - html

Question

Hi I've looked up ways to place an arrow under my navigation but I can't get to work on my navigation bar. Any help would be much appreciated.
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r">Ligue 1
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
<div class="handle"> Menu </div>
</nav>
I thought that is css would work but it hasn't
li a:after {
content: '';
display: none;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
my code https://jsfiddle.net/jzqv6kr0/

Answer 1

In your case, the arrow is there it's just that the overflow:hidden on the ul means you can't see it.
I've adapted your code a little (see the snippet below) but it requires some tweaks to get it exactly as you might like. I've colored the arrow red for simplicity.
nav ul {
/* overflow:hidden; REMOVE */
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul {
background-color: #43a286;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: inline-block;
padding: 20px;
width: 12.3%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul ul {
display: none;
position: absolute;
background-color: #399077;
margin-left: -3%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
margin-top: 2%;
display: block;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
width: 165px;
}
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><span>Home</span>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul>
<li id="r">Ligue 1
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
</ul>
</nav>