html - 下拉菜单错误

Question

我正在尝试做一个下拉菜单，但遇到了两个问题。

1. 当我将鼠标悬停在主导航栏中的链接(about 和 connect)上时，可点击区域只是单词，而不是整个区域文字占据“作品”和“成就”之类的位置。

2. 在实际的下拉菜单中，当我将鼠标悬停在链接上时，并没有选择被占用的整个文本部分。

我试图修复它，但只得到它以突出显示该区域的正确部分。

我尝试添加填充/边距，但效果不佳。

这是我的 CSS:

body {
  background-color: #FFFFF5;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#nav {
  width: 480px;
  float: right;
  height: 30px;
  border-top: thin solid #000000;
  line-height: 0px;
  text-align: right;
  padding-right: 20px;
}
.navText {
  color: #000000;
  text-decoration: none;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
}
#nav ul {
  text-align: left;
  display: inline;
  list-style: none;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}
#nav ul li {
  font: 17px/17px sans-serif;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 10px;
  padding-right: 10px;
}
#nav ul li a:hover {
  background: #555;
  color: #fffff5;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
#nav ul li:hover {
  background: #555;
  color: #fffff5;
}
#nav ul li ul {
  position: absolute;
  top: 30px;
  left: 0px;
  opacity: 0;
  visibility: hidden;
  width: 160px;
}
#nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
#nav ul li ul li {
  background: #555;
  display: block;
  color: #fffff5;
  font: 13px sans-serif;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#nav ul li ul li a {
  text-decoration: none;
  background: #555;
  display: block;
  color: #fffff5;
  font: 13px sans-serif;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#nav ul li ul li a:hover {
  background: #666;
  width: 150px;
}

这是我的 HTML:

<div id="nav">
  <ul>
    <li><a href="about.html" class="navText">ABOUT</a></li>
    <li>WORKS
      <ul>
        <li><a href="written.html">Written</a></li>
        <li><a href="photos.html">Photography</a></li>
        <li><a href="film.html">Film</a></li>
        <li><a href="other.html">Other</a></li>
      </ul>
    </li>
    <li>ACHIEVEMENTS
      <ul>
        <li><a href="skills.html">Skills</a></li>
        <li><a href="acad.html">Academic</a></li>
        <li><a href="cca.html">Co-Curricular</a></li>
      </ul>
    </li>
    <li><a href="connect.html" class="navText">CONNECT</a></li>
  </ul>
</div>

我的代码可以在这里预览:https://jsfiddle.net/zinctan/83jh28o4/1/ .

Answer 1

下面分别列出问题的原因:

1. 您需要为链接本身添加填充，而不是 li元素。
2. 与上述相同的问题，另外您需要添加 width:100%到链接，以便它们可以占据整个宽度。

另一个问题:你没有添加 <a> li 的元素里面有下拉菜单。您应该像其他链接一样添加链接。

DEMO