我正在尝试下拉菜单,我遇到了两个问题。
当我将鼠标悬停在主导航栏(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/。
答案 0 :(得分:0)
以下是分别出现问题的原因:
li
添加填充
元件。width:100%
添加到
链接,以便他们可以占据整个宽度。另一个问题:
您没有为其中包含下拉列表的<a>
添加li
个元素。您应该将链接添加为其他链接。
<强> DEMO 强>
答案 1 :(得分:0)
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;
}
答案 2 :(得分:0)
为链接添加填充:
#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;
}