在这个菜单上花了相当多的时间,我仍然无法按照我想要的方式排列它,这是我的菜单代码,希望有人能提供帮助。
这是我的 HTML:
<div id="bandmenu">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="song-list.html">Song List</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="shows.html">Shows</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="comments.html">Comments</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</div>
CSS:
#bandmenu {
padding-top: 134px;
width: 100%;
}
#bandmenu .nav{
margin: 0;
padding: 0;
border-width: 1px 0;
list-style: none;
text-align: center;
line-height: 1px;
}
#bandmenu .nav li{
display: inline;
height: 2px;
}
#bandmenu .nav a{
display: inline-block;
padding: 15px;
height: 0px;
text-decoration: none;
color: #fff;
font-size: 16px;
}
#bandmenu .nav a:hover{
color: #fff;
background-color: darkgray;
}
最佳答案
根据您的评论,我猜您想要 this demo
您需要像这样修改 CSS:
#bandmenu .nav a{
display: inline-block;
padding: 0 15px;
height: 15px;
line-height: 15px;
text-decoration: none;
color: #fff;
font-size: 16px;
}
由于您在顶部和底部定义了填充,因此您将获得一个较大的灰色悬停区域。您需要将其删除,设置高度并将文本放在高度的中心。
关于html - 如何获得合适尺寸的悬停灰色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33170818/