0
我正在嘗試做一個下拉菜單，我有兩個問題。下拉菜單錯誤
當我將鼠標懸停在主導航欄（
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/。