为什么 a:hover 和 href 链接在我的无序 CSS 列表中不起作用？答案

【问题标题】：Why is a:hover and href links not working in my unordered css list?为什么 a:hover 和 href 链接在我的无序 CSS 列表中不起作用？
【发布时间】：2017-08-16 23:53:01
【问题描述】：

好的，由于某种原因，我的 href 链接和 a:hover css 功能无法正常工作。谢谢！

ID“mobNav”也用于我的移动导航，所以它不应该干扰我的问题。

代码片段：

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>

【问题讨论】：

“不工作”以什么方式？问题中的 sn-p 似乎工作正常。
导航块没有链接到任何东西，当我将鼠标悬停在它们上面时，悬停属性也没有被应用。嗯，那可能是别的东西。

标签： html css hover html-lists href

【解决方案1】：

原来导航标签应该包含标题元素。我将 html 更改为：

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

并在导航中包含标题，由于某种原因，悬停功能和 href 起作用了。

【讨论】：