在導航欄中使用圖像（徽標）

Question

我在水平導航欄的左側添加了一個徽標，我遇到了一些不同的問題。而且這裏首先是截圖：http://i.imgur.com/TUafzKs.png

問題：

-I要排隊所有的文字與圖案的底部。現在所有的文字都會自動排列到最上面。

- 在鏈接懸停時，我希望將背景顏色更改爲白色以延伸至酒吧的整個高度，但只是執行其中的一部分。這是一個屏幕截圖：http://i.imgur.com/ljkEdol.png

- 正如你在第一個屏幕截圖中看到的，該欄不會延伸到頁面的兩端（側面和頂部）。中間有少量空間。我想在那裏沒有空白;只是粉紅色延伸到邊緣。

HTML爲欄：

<ul id="nav"> 
<li><img id="logo" src="images/logo2.png"> 
<li><a href="../work.htm">Work</a></li> 
<li><a href="../about.htm">About</a></li> 
<li><a href="../thoughts.htm">Thoughts</a></li> 
<li><a href="../contact.htm">Contact</a></li> 
</ul> 

CSS：

#nav { 
width:100%; 
float:left; 
margin: 0 0 3em 0; 
padding: 0; 
list-style: none; 
background-color: #D0489A; 
border-bottom: 3px solid #D0489A; 
} 

#nav ul { 
position: absolute; 
right:0px; 
bottom: 2px; 
} 

#nav li { 
float: left; 
font-family: whitney light, sans-serif; 
} 

#nav li a { 
list-style: none; 
display:inline; 
display: block; 
padding: 8px 15px; 
text-decoration: none; 
font-weight: bold; 
color: white; 
border-right: 1px solid #D0489A; 
} 

#nav li a:hover { 
color: black; 
background-color: white; 
} 

#logo { 
width:200px; 
} 

Answer 1

#nav li a { 
    list-style: none; 
    display: inline-block; 
    padding: 8px 15px; 
    margin-top:174px; // you may need to adjust to get lined up perfectly 
    text-decoration: none; 
    font-weight: bold; 
    color: white; 
    border-right: 1px solid #D0489A; 
}