Weird stroke applying to text on hover - html

Question

Hey guys I've been having a weird css quirk happen and I can't seem to find the culprit. I have some li links displayed on top of a image based background and when I hover the links they change colors but all apply a white border around the type which looks horrible.
I added a normalize.css stylesheet to my project hoping it would kill any standard style applying it but that didn't seem to work. Does anyone have any idea why this is happening?
Here is my styles for my navigation
Nav CSS
nav {
width: 100%;
position: fixed;
top: 20;
z-index: 2;
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
Nav HTML
<nav>
<ul>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="menu">Menu</a></li>
<li><a ui-sref="delivery">Delivery Locations</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</nav>

Answer 1

After investigating, I found that the problem was simply... you had duplicate navbar!
Since the navbar has a fixed position, both of them would be at the same exact place. So when you hover a link in the front navbar, it becomes black.. BUT the same link at the back remains white, thus, creating a weird stroke.
Here is a demo that reproduces your problem:
body { background:#111; }
nav {
width: 100%;
position: fixed;
z-index: 2;
top: 20px; /* was missing a unit (px) */
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
<!-- stroke you say? -->
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
<!-- who's behind me? -->
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
Solution: just remove the duplicated navbar... simple mistake.
body { background:#111; }
nav {
width: 100%;
position: fixed;
z-index: 2;
top: 20px; /* was missing a unit (px) */
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
jsFiddle: https://jsfiddle.net/azizn/bf28e5g9/
Notice how the <app-navbar> appears twice in your code: