Css 在导航栏中使用图像（徽标）

我在水平导航栏的左侧添加了一个徽标，我遇到了一些不同的问题。首先，这里是一个屏幕截图：

问题：

-我想把所有的文字与商标的底部对齐。现在所有的文本都自动排列到顶部

-在链接悬停时，我希望背景颜色变为白色，以延伸到条的整个高度，但它只做了一部分。以下是一个屏幕截图：

-正如您在第一个屏幕截图中所看到的，该条不会延伸到页面的末端（侧面和顶部）。中间有一小部分空间。我希望没有空白；只有延伸到边缘的粉红色

工具栏的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>

---

对于页眉和边缘之间的空间，重置正文的默认边距：

body{margin:0；}

。

#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;
}

#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;
}