Search code examples
htmlcsshoverhtml-listshref

Why is a:hover and href links not working in my unordered css list?


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.

Code Snippet:

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>


Solution

  • 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.