Menu dynamique

Bonjour,

je suis entrain de faire un site de football et je souhaite faire un menu dynamique comme sur ce site mais seulement a 2 niveaux:
https://www.footmercato.net/
j'ai reussi a faire le 1er niveau mais j'ai d'enorme difficulté concernant le 2eme niveau (je débute :D).
les problemes que j'ai:
1) Je n'arrive pas a mettre au milieu de la ligne(verticalement) le niveau 1 du menu.
2) Je n'arrive pas a mettre au milieu(horizontalement) et en dessous du niveau 1 le niveau 2 du menu.

mon code html:

<div class="menu" align="center">
	<ul>
		<li><a href="#" class="home"></a></li>
		<li><a href="#">Chaine</a>
			<ul class="sousmenu">
				<li><a href="#">Chaine 1</a></li>
				<li><a href="#">Chaine 2</a></li>
				<li><a href="#">Chaine 3</a></li>
			</ul>
		</li>
		<li><a href="#">Programme</a>
			<ul class="sousmenu">
				<li><a href="#">Chaine 1</a></li>
				<li><a href="#">Chaine 2</a></li>
				<li><a href="#">Chaine 3</a></li>
			</ul>
		</li>
		<li><a href="#">Livesore</a></li>
		<li><a href="#">Video</a>
			<ul class="sousmenu">
				<li><a href="#">Premier League</a></li>
				<li><a href="#">Liga</a></li>
				<li><a href="#">Serie A</a></li>
				<li><a href="#">Bundesliga</a></li>
				<li><a href="#">Ligue 1</a></li>
				<li><a href="#">Superlig</a></li>
			</ul>
		</li>
		<li><a href="#">Championnat</a>
			<ul class="sousmenu">
				<li><a href="#">Premier League</a></li>
				<li><a href="#">Liga</a></li>
				<li><a href="#">Serie A</a></li>
				<li><a href="#">Bundesliga</a></li>
				<li><a href="#">Ligue 1</a></li>
				<li><a href="#">Superlig</a></li>
			</ul>
		</li>
		<li><a href="#">S'Abonner</a></li>
	</ul>
</div>

mon code css:

#header{
width: 100%;
background-color: #A30503;
height: 161px;
}

#header .head{
height: 70px;
}

#header .menu{
background-color: white;
height: 32px;
}

#header .menu ul li{
list-style: none;
display: inline;
margin: 0;
}

#header .menu  .sousmenu{
display: none;
position: absolute;
background-color: #A30503;
height: 32px;
}

#header .menu li:hover > .sousmenu{
display: inline;

}

#header .menu .sousmenu li{
display: inline;
}

#header .menu ul li a{
padding: 8px 16px 8px 16px; 
text-decoration: none;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
color: black;
}

#header .menu ul li a:hover{
padding: 8px 16px 8px 16px; 
background-color: #A30503;
color: white;
}


#header .menu  ul li a.home{
background: url(../images/home.png) no-repeat 0 0;
margin: 0;
position: relative;
top: 7px;
padding-right: 16px;
}

#header .menu ul li a.home:hover{
background: url(../images/homehover.png) no-repeat 0 0;
margin: 0;
}

si vous voulez voir ce que ca donne:
http://abali-maconnerie.com/test/

je vous remercie d'avance de votre aide