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 немного, добавить высоту Ли элемента, изменить его на встроенный блок и добавить высоту строки к :)

* { 
 
    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>