懸停整個李，而不是文本

Question

我試圖讓懸停的鏈接，它會圍繞整個李，而不僅僅是文本本身，如果你知道我的意思。

如果我的CSS完全混亂，請事先道歉。

CSS：

#navi { 
    font-size:14px; 
    text-align:left; 
    text-transform:uppercase; 

} 

#navi ul { 
    padding: 5px; 
    margin: 0; 
} 

#navi li { 
    position:relative; 
    display:inline-block; 
} 

#navi a { 
    padding:.03em 1em; 
    text-decoration: none; 
} 

#navi a:hover { 
    background-color: #e0e0e0; 
    height: 50px; 
} 

指數：

<div id="navi"> 
<ul class="ul"> 
    <li><a href="">Test 1</a></li> 
    <li><a href="">Test 1</a></li> 
    <li><a href="">Test 1</a></li>      
</ul> 
</div> 

它看起來像什麼：

這是個什麼樣子，當鼠標懸停，如：

有什麼建議嗎？我只是想讓它繞過整個盒子。謝謝！

Answer 1

而不是一個普通的鏈接，你可以使用div。然後您可以更改其懸停的背景顏色。

Answer 2

將鏈接設置爲block，然後根據需要添加儘可能多的padding。 爲了更好的相貌上看，我從<ul>

#navi a { 
    display: block; 
    padding:.03em 1em; 
    text-decoration: none; 
} 

例取出填充：http://jsfiddle.net/6Cz7X/ - 有一些你的CSS更多的變化：

#navi { 
    font-size:14px; 
    text-transform:uppercase; 
} 

#navi ul { 
    margin: 0; 
    list-style-type: none; 
    padding: 0; 
} 

#navi li { 
    float:left; 
} 

#navi a { 
    display: block; 
    padding: 1em 1em; 
    text-decoration: none; 
} 

#navi a:hover { 
    background-color: #e0e0e0; 
} 

或者添加line-height

Answer 3

你可以設置<a>作爲display：block，並在其中應用垂直填充：http://codepen.io/anon/pen/nmqKr

#navi { 
    font-size:14px; 
    text-align:left; 
    text-transform:uppercase; 
    background:blue; 
border-bottom:solid turquoise 5px; 
} 

#navi ul { 
    padding:0 5px;/* send vertical padding into a tag */ 
    margin: 0; 
} 

#navi li { 
    display:inline-block; 
} 

#navi a { 
    padding:5px 1em;/* apply here the vertical-padding */ 
    text-decoration: none; 
    display:block;/* take all width and have no gaps at bottom */ 
    height:100%; 
    color:white; 
} 

#navi a:hover { 
    background-color: #e0e0e0; 
    color:black; 
}