Acomodar Menu CSS

[Simon_Echecopar]

Tengo los siguientes codigos,

Código HTML:

header {
    background: #000000;
    margin: 0 auto;
    max-width: 100%;
    max-height: 300px;
}
header h1 {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    vertical-align: top;
}
header h1 video {
    display: inline-block;
    max-width: 100%;
    height: 200px;
    vertical-align: top;
    margin: 0;
}
header nav {
    display: inline-block;
    padding: 0;
    max-width: 100%;
    height:150px;
}
header nav p {
    vertical-align: top;
    position: relative;
    top: 50px;
}
header nav p#titulo {
    font-size: 3em;
    color: #FFF;
    vertical-align: middle;
}
header nav p#slogan {
    color: #ffcb05;
    font-size: 1.1em;
    font-weight:bold;
    vertical-align: middle;
}
header nav p#subtitulo {
    color: #999999;
    font-size: 1.9em;
    font-weight:bold;
}
ul#menu {
    display: block;
    list-style: none;
    position: relative;
    right: -400px;
    max-width: 100%;
    vertical-align: middle;
}
header nav ul li {
    display: inline-block;
    padding: 0.1em;
    vertical-align: bottom;
}
header nav ul li a {
    background: #000000;
    border: 0;
    color: #FFF;
    font-family: century gothic, Helvetica, Verdana;
    font-size: 1em;
    padding: 1.2em;
    text-decoration: none;
    display: block;
	width:38px;
	height:5px;
}

Código HTML:

<header>
  <h1>
   <video autoplay="true" width="90%" height="100%">
    <source src="vid/animacion.ogv" type='video/ogg' />
    <source src="vid/animacion.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
   </video> 
  </h1>
		  <nav>
            <p id="titulo"> OL SPORTS</p>
            <p id="slogan"> DOMINANDO EL BAL&Oacute;N </p>
            <p id="subtitulo"> AGENCIA DE CONTENIDOS DEPORTIVOS <br/>
			 <ul id="menu">
                <li><a href="index.html">Inicio</a></li>
                <li><a href="agencia.html">Agenda</a></li>
                <li><a href="nosotros.html">Nosotros</a></li>
                <li><a href="servicios.html">Servicios</a></li>
                <li><a href="contacto.html">Contacto</a></li>
				<li ><a href="Clientes.html"><font color="red">Clientes</font></a><br/><a width="50" href="registroinicio.html">Login/Sign Up</a></li></ul> 
			</p></nav></header> 

No entiendo como puedo acomodar el menu exactamente abajo del texto. Soy nuevo en HTML5 y no lo he usado antes. Si alguien me lo explica sabre corregirlo.