CSS导航背景颜色

Question

我有一个导航栏与CSS & HTML但有点问题。 我想使文本的所有区域（主页f.e.）变暗，而不仅仅是文本。

CSS：

#navi { 
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no-  repeat; 
background-position: 1272px -14px; 
margin-left: -8px; 
margin-right: -8px; 
height: 43px; 
} 

a { 
text-decoration: none; 
color: white; 
font-size: 16px; 
} 

ul { 
list-style-type: none; 
margin-top: -8px; 
padding: 10px; 
padding-left: 5px; 
margin-left: -15px; 
} 

li { 
display: inline; 
margin-left: 15px; 
font-size: 14px; 
} 

li:hover { 
background-color: black; 
} 

我怎样才能让文字更暗的complety区域？ - >http://i.imgur.com/exd9eNR.png

在此先感谢。

Answer 1

优化你的CSS一点点，加上高度li元素，将其更改为内联块和线高度增加了:)

* { 
 
    margin: 0px; 
 
} 
 
#navi { 
 
    background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no-repeat; 
 
    background-position: 1272px -14px; 
 
    height: 43px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-size: 16px; 
 
    line-height: 43px; 
 
    padding: 0px 10px; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
li { 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
    font-size: 14px; 
 
    height: 43px; 
 
} 
 
li:hover { 
 
    background-color: black; 
 
}

<div id="navi"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    </ul> 
 
</div>