html - 如何获得合适尺寸的悬停灰色

Question

在这个菜单上花了相当多的时间，我仍然无法按照我想要的方式排列它，这是我的菜单代码，希望有人能提供帮助。

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

Answer 1

根据您的评论，我猜您想要 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;        
}

由于您在顶部和底部定义了填充，因此您将获得一个较大的灰色悬停区域。您需要将其删除，设置高度并将文本放在高度的中心。