Vertically Align: Middle

Question

I am trying to vertically align the two links to the middle to either side of the logo, but it does not seem to work. Furthermore I want to make this a responsive navigation with both links appearing below the logo in accordion drop down fashion. I have been looking everywhere for the solution but I cannot find one.

HTML

<nav>
        <ul id="nav">
        <li><a href="#">Boat</a>
                <ul class="boat">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                </ul></li>
            <img src="images/logo.png"/>
            <li><a href="#">Experience</a>
                <ul class="experience">
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                    <li><a href="#">Page 5</a></li>
                </ul></li>

        </ul>
</nav>

CSS

* { 
   margin: 0px;
   padding: 0px;
}

header {
    width: 100%;
    text-align: center;
}

.center h1 {
    display: inline;
    vertical-align: 60%;
}


ul#nav {
    text-align: center;
    vertical-align:top;
}

ul#nav li {
    width: 125px;
    position: relative;
    margin-right:5px;
    line-height: 25px;
    border-radius: 10px;
    display: inline-block;
    padding: 5px;
}

ul#nav a {
   text-decoration: none;
   display: block;
   width: 125px;
   height: 25px;
   line-height: 25px;
   background-color: #f3f3f3;
   border: 1px solid #ccc;
   border-radius: 5px;
   text-align: center;
}

ul.boat, ul.experience {
   list-style-type: none;
   display: inline-block;
   text-align: center;
   font-size: 1em;
   position: absolute;
   top:100%;

}

ul#nav li:hover > a {
   background-color: yellow;
}

ul#nav ul.boat, ul.experience {
   display:none;
}

ul#nav li:hover ul.boat {
   display: block;
}

ul#nav li:hover ul.experience {
   display: block;
}

Thank you for any help you can provide

Answer 1

ul#nav li
{
vertical-align: top; // takes the links to the top
padding-top: 10px; // modify so that it goes to middle
}

This code should work if you are trying to place the links in the middle of the image. Do tell me if it works

made a fiddle here

http://jsfiddle.net/h_awk/Ff5xk/