Ok so for some reason my href links and a:hover css function aren't working. Thanks!
Also the id "mobNav" is for my mobile navigation so it shouldn't be interfering with my problem.
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
background: #fcfcfc;
color: #000;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
box-shadow: inset 0 0 0 3px #3a7999;
}
<nav id="topTab">
<a href="#" id="mobNav"></a>
<ul>
<li><a href="http://www.example.org/" title="morning delight">morning delight</a></li>
<li><a href="http://www.example.org/" title="yesterday">yesterday's leftovers</a></li>
<li><a href="http://www.example.org/" title="accelaaaa">accela-meme</a></li>
</ul>
</nav>
Turns out the nav tag is expected to contain header elements. I changed the html to this:
<nav id="topTab">
<a href="#" id="mobNav"></a>
<ul>
<li><a href="http://www.example.org/" title="morning delight">morning delight</a></li>
<li><a href="wwww.google.com" title="yesterday">yesterday's leftovers</a></li>
<li><a href="#" title="accelaaaa">accela-meme</a></li>
</ul>
<div>
<img id="navRight" src = "forwardarrow.png" alt="forwards">
<img id="navLeft" src = "backarrow.png" alt="backwards">
</div>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">MemeSlutz</b></h1>
<h2>Dank Rank</h2>
</div>
</nav>
And included the header in the nav, which for some reason the hover function and href worked.