用CSS垂直对齐导航栏

Question

I am making a website for fun and i put in a navigation bar. The only problem is that the navigation bar is not vertically centred and is being pushed down a row by the links leaving an unwanted white space between the logo and nav bar. The links are also too high causing them (when hovering over) to not remain within the navigation area. Is there any fix for this? Code below:

Html:

<nav id="nav">
    <ul>
        <li><a href="http://www.google.com">hello</a></li>
        <li><a href="http://www.google.com">hello</a></li>
    </ul>       
</nav>

Css:

.container{
 width:1020px;
 margin:auto;
 position:relative;
 }


    #nav{
width:1020px;
height:50px;
background-color:#EBB035;
}
#nav ul{
display:block;
list-style-type:none;
}
#nav li{
display:inline;
}
#nav a:link{
color: #000000;
font-weight: 700;
padding: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav a:visited{
color: #000000;
font-weight: 700;
padding: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover{
background-color:#FFCC00;
color: #000000;
font-weight: 700;
padding: 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}

Thank you in advance!

Answer 1

Add positioning to #nav and #nav ul as follows; and you'll have result like this

#nav {
    width:1020px;
    height:50px;
    background-color:#EBB035;
    position: absolute;
}
#nav ul {
    display:block;
    position: relative;
    list-style-type:none;
    margin-top: 1em;
}