doppio menù di navigazione

[gino_pupo]

Ho un problema nell'allineare i due menù presenti nella pagina.

In più ho un problema nel roolhover del menu verticale,ho fatto tutte le modifiche possibili però non ne riesco a venire a capo

codice:

body {
color:#999999;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
color:#999;
background:#FFF;
margin:0px auto; !important
margin:0px 0px;
padding:0px 0px;
line-height:12px;
}

.fl {
float:left;
}

.fr {
float:right;
}
.center{
clear:both;
height:100%;
width:100%;
margin:0px auto; !important
margin:0px 0px;
padding:0px 0px;
}

.clearfloat{
clear:both;
}

.base{
vertical-align: bottom;
}

#container {
text-align:center;
width:800px;
height: auto;
padding:0px 0px;
margin:0px auto; !important
margin:0px 0px;
}

#header {
height:420px;
width:800px;
}

#header img{
padding:10px 0px;
margin:0px auto; !important
margin:0px 0px;
border:none;
}

#menu {
float:left;
height:200px;
text-align:left;
margin:2px auto; !important
margin:2px 0px;
padding:0px 0px;
width:170px;
}
#menu ul{
text-align:left;
margin:0px auto; !important
margin:0px 0px;
padding:0px 0px;
height:400px;
width:162px;
display: block;
text-decoration:none;
}
#menu li{
display: block;
font-size:78%;
list-style-type:none;
height:25px;
}

#menu a:link, #navlist a:visited {
width:162px;
color:#CCCCCC;
text-decoration:none;
background:url(images/btn-hover.png) top left no-repeat #fff;
padding:5px 100px 5px 30px;
font-weight:bold;
}
#menu a:hover{
font-weight:bolder;
color:#FFFFFF;
background:url(images/btn-hover.png) top left no-repeat #FFF;
}


#infoMenu {
height:22px;
text-align:left;
margin:2px auto; !important
margin:2px 0px;
padding:0px 0px;
}

#infoMenu ul{
margin:0px auto; !important
margin:0px 0px;
text-decoration:none;
display:inline;
}

#infoMenu li{
margin:0px auto; !important
margin:0px 0px;
font-size:78%;
list-style-type:none;
display:inline;
}

#infoMenu a:link, #navlist a:visited {
color:#ccc;
text-decoration:none;
background:url(images/btn-hover.png) left top no-repeat #fff ;
padding:5px 20px 5px 30px;
font-weight:bold;
}
#infoMenu a:hover{
font-weight:bolder;
color:#FFFFFF;
background:url(images/btn-hover.png) left top no-repeat #FFF;

}


#content {
height:450px;;
padding:0px 0px 0px 0px;
margin:3px auto; !important
margin:3px 0px;
}
#content img {
margin:20px 0px;
}
#footer{
height:70px;
background-color:#83c341;
clear:both;
}

codice html

        <div id="menu">
            <ul class="center">
                <li class="fl"> [url="info.html"]INFO[/url] 
                <li class="fl"> [url="programma.html"]PROGRAMM[/url] 
                <li class="fl"> [url="media.html"]MEDIA[/url]  
                <li class="fl"> [url="partners.html"]PARTNERS[/url]
[/list]
        </div>        
        <div id="infoMenu">
            <ul class="center">
                <li class="fl">[url="location.html"]RELOAD 08[/url]
                <li class="fl">[url="location.html"]LOCATION[/url] 
                <li class="fl">[url="tourist.html"]TOURIST INFO[/url]     
                <li class="fl">[url="contact.html"]CONTACT[/url]
                <li class="fl">[url="tickets.html"]TICKETS[/url]
[/list]
        </div> 

se può essere d'aiuto ecco il Link