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

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;   
} 

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