Question

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

当我将鼠标悬停在主导航栏（about和connect）中的链接上时，可点击区域只是单词，而不是文本占据的整个区域，如“作品”和'成就。'
在实际的下拉菜单中，当我将鼠标悬停在链接上时，不会选择占用的整个文本部分。

我试图解决它，但只是强调它突出该区域的正确部分。

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

这是我的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

以下是分别出现问题的原因：

您需要为链接本身而不是li添加填充元件。
与上述问题相同，而且您需要将width:100%添加到链接，以便他们可以占据整个宽度。

另一个问题：您没有为其中包含下拉列表的<a>添加li个元素。您应该将链接添加为其他链接。

<强> DEMO

Answer 2

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;
	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-transition: opacity 0.2s;
	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:hover {
background: #666;
}
#nav ul li ul li:hover a {
    background: #666;
}
</style>

     <div id="nav">
      <ul>
        <a href="about.html" class="navText"><li>ABOUT</li></a>
        <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>
        <a href="connect.html" class="navText"><li>CONNECT</li></a>
      </ul>
    </div>

1：更改

<li><a href="about.html" class="navText">ABOUT</a></li>
…
<li><a href="connect.html" class="navText">CONNECT</a></li>

以

<a href="about.html" class="navText"><li>ABOUT</li></a> … <a href="connect.html" class="navText"><li>CONNECT</li></a>

2：更改

CSS

#nav ul li ul li a:hover { background: #666; width: 150px; }

以

#nav ul li ul li:hover { background: #666; }

并添加

#nav ul li ul li:hover a { background: #666; }

Answer 3

为链接添加填充：

#nav ul li a {
  display: block;
  padding: 7px 10px;
}

同一级别的<li>元素也需要<a>标记才能生效，如下所示：

<a href="#" class="navText">WORKS</a>

在这部分代码中将宽度更改为140px（160像素减去两侧填充的10 px）：

#nav ul li ul li a:hover {
    width: 140px;
}

https://jsfiddle.net/jonathanzuniga/6mpn8wpo/

下拉菜单错误

3 个答案: