Creatng a navigation bar with illusion of a following selector - html

Question

I'm working on a project of mine and I've got a relatively interesting idea that would look pretty nice, only issue is, I can't really figure out how to pull it off.
here's the deal. I've got my navigation bar set up and it looks something like this
Now for illustration purposes i've margined the small arrow under it. As in now, it's only a lone <img> placed under the navbar and margin applied to it to make it look like it's under it.
Basically what I'm trying to accomplish is, whenever you hover over a certain part of the navigation bar, the arrow will move under it. For sake of simplicity and readability of this post, let's not discuss any animations and smoothness, literally all I want is for the arrow to disappear from the original position and re-appear under the desired (hovered-over) location.
Any suggestions what would be the best (and easiest) way to pull this off?
Ideally I'd prefer usage of HTML/CSS only.
Probably only solution I came to so far is creating a separate arrow for each item inside the navigation bar.
Set it to
.nav img {
display: inline-block;
visbility: hidden;
}
And then create
.nav img:hover {
visiblity: visible;
}
Now there's multiple issues with this.
1) This would mean, people would need to hover on the arrows under it, intead of the actual navbar items for them to appear.
2) I would need to manually margin each and every arrow for them to fit under every single menu item.
3) While this would work on my screen, if you switch to any different resolution, the margin would be off for them.
I'm interested to hear, if you guys have any suggestions.
EDIT: I actually figured out a solution, that I can simply create a dropdown menu (another ul) and just put image there. Though if you still have any more intuitive and better working solutions, I'll be happy to view them.

Answer 1

If I understand your question correctly you can achieve this by doing the following without any images. I have added the class of active and given this a unique color to show what page you are currently viewing and then the hover effect will follow in a different color. The selector will be a psuedo element with pure css triangle and will show on hover.
Here is a fiddle to show you this in action Fiddle
And the markup:
<nav>
<ul>
<li><a class="active" href="#">Link</a></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
and the css like this:
nav{
text-align: center;
background: #000;
}
nav ul{
list-style-type: none;
padding: 0;
margin:0;
}
nav li{
display:inline-block;
position: relative
}
nav li a{
color: #fff;
padding: 10px;
display: inline-block;
text-decoration: none;
}
nav li a:before{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(200,200,200,1);
position: absolute;
bottom:-20px;
left:0;right: 0;
margin: 0 auto;
content:'';
opacity: 0;
-ms-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
-webkit-transition: opacity 300ms ease-in-out;
-o-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
nav li a.active:before{
opacity: 1;
border-top: 20px solid red;
}
nav li a:hover:before{
opacity: 1;
}