如何獲得懸停的灰色顏色合適的尺寸

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

由於您已將填充定義爲頂部和底部，因此您將獲得大型灰色懸停區域。您需要刪除它，設置高度並將文本放置在高度的中心。