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>