navigation bar arrow not showing under each tab CSS - html

Question

I want to use css to get an arrow that points down from each tab of the navigation bar. This is what I have so far.
ul {
background: rgba(0,0,0,0.3);
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-transition:color 0.5s ease-in;
}
li a:visited {
color: white;
}
li a:hover {
color: #df9fa2;
}
#menu a:hover:after {
content: "";
position: absolute;
top: 52px;
width: 0px;
left: 50%;
margin-left: -15px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid rgba(0,0,0,0.3);
}
<div id="nav">
<ul id="menu">
<li><a class="link" href="#home">Home</a></li>
<li><a class="link" href="#about">About</a></li>
<li><a class="link" href="#skills">Skills</a></li>
<li><a class="link" href="#portfolio">Portfolio</a></li>
<li style="float:right"><a class="link" href="#contact">Contact</a></li>
</ul>
</div>
The arrow is always showing up in the middle of the navigation bar. This is because of the left: 50% code. I think it's doing this because it's getting 50% from the wrong element but I don't know how to fix it. Any help would be great.

Answer 1

Positioning can sometimes be a little tricky. You need to position the parent (<a>: position: relative;), so that the positioning of the arrow is calculated relative to the link.
To set the arrows down under the bar, you have to use bottom minus the height of the arrow: bottom: -15px;. I had to remove your overflow:hidden; and put an element with clear:both; after the <li> tags, to make them visible, because your <ul>s height was zero with only containing floating elements.
ul {
background: rgba(0, 0, 0, 0.3);
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: block;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
-webkit-transition: color 0.5s ease-in;
position: relative;
}
li a:visited {
color: white;
}
li a:hover {
color: #df9fa2;
}
#menu a:hover:after {
content: "";
position: absolute;
bottom: -15px;
width: 0px;
left: 50%;
margin-left: -15px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid rgba(0, 0, 0, 0.3);
}
<div id="nav">
<ul id="menu">
<li><a class="link" href="#home">Home</a>
</li>
<li><a class="link" href="#about">About</a>
</li>
<li><a class="link" href="#skills">Skills</a>
</li>
<li><a class="link" href="#portfolio">Portfolio</a>
</li>
<li style="float:right;"><a class="link" href="#contact">Contact</a>
</li>
<br style="clear:both;" />
</ul>
</div>
Just read some examples about positioning in CSS:
http://www.w3schools.com/css/css_positioning.asp