Soucis barre de menu

Bonsoir,
Je rencontre un problème pour mon menu..
Je veux l'afficher dans ma bannière à la limite basse centrer de celle-ci (J'essaye d'être le plus précis possible..)
Mais mon menu ne veut pas monter il reste bloquer a la limite de mon body..
Depuis plus de 1H30 je cherche comment monter ce fichu menu mais je ne trouve pas j'ai essaye divers technique mais rien ne se passe..

Voila ou ce trouve le menu : http://hpics.li/690e09d
Je voudrais le mettre la : http://hpics.li/bea90bf ( ou il y a la flèche..)

Mon code html :

<div id="banner1">
        <a href="index.html"> <img src="image/logo.png"></a>
    </div>

    <div id="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="page2.html">Bio</a></li>
                <li><a href="page2.html">Tour Date</a></li>
                <li><a href="">Photos</a></li>
                <li><a href="">Contact</a></li>
            </ul>
    </div>

Mon CSS :

body{
    margin:auto;
    width: 100%;
    height: 100% ;
    background-color: #252628;  

}

#banner1{
    width: 100%;
    height: 130px;
    margin: 0 auto ;
    background-color: #F2F2F2;
}

#banner1 img{
    display: block;
    height: 128px;
    margin-left: 0px;
    margin-bottom: 15px;
}

#menu{
    width: 100%;
    margin:auto;
}

#menu ul { 
    text-align: center;
    padding-right: 30px;
    margin:auto;
}

#menu ul li{
    display: inline-block;
    margin:15px;
    text-align: center;
    padding-right: 30px;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    color:white;

}

#menu ul li a:hover{
    border-style: solid;
    border-radius: 10px;
    border-color: white;

}

Voila merci d'avance je me suis arracher la tête lol..