cssデザイン - Mozilla で見る -コミュの[質問]CSSの整理。

今非常に勉強になやんでいましてCSSでわからない部分がでてきました。
<body>
<div id="wrapper">
<div id= "header">
<h1><img src="img/P3-2.gif" width="728" height="120"></h1>
</div>
<div id="menu">
<ul>
<li><a href="#"><span>ホーム</span></a></li>
<li><a href="#"><span>ストーリー</span></a></li>
<li><a href="#"><span>攻略</span></a></li>
<li><a href="#"><span></span></a></li>
<li><a href="#"><span></span></a></li>
</ul>
</div>
<div id="main">
<div id="footer">
<p>2006 perusona3 kouryakui.
e-mail:<span class="lead"></span></p>
</div>
</div>

CSS

body{
margin:0;
padding:0;
text-align:center;
}

#Wrapper{
background-color:#ffffff;
margin:0;
padding:0;
width:720px;
text-align:left;
}

#header{
width:720px;
height:120px;
margin:0;
padding:0;
}

#header h1{
margin:0px;
padding:0px;
}
#menu{
width:192px;
height:360px;
background-color:#00FFCC;
float:left;

}


#menu ul{
list-style:none;
line-height:30px 0 0 30px;
}

#main{
width: 528px;
height: 360px;
float: right;
background-color:#000000
}

#main h2{
font-size:14px;
margin:20px 0 0 20px;
}

#main .info{
font-size:14px;
line-height:20px;
margin:20px 0 0 20px;
color:green;
}
#main .lead{
font-size:14px;
line-height:20px;
margin:20px 0 0 20px;

}

#footer{
width: 720px;
height: 48px;
clear:both;
background-color:cccccc;
}

#footer p{
color:#666666;
margin:12px 0 0 20px;
font-size:12px;
}
上記のソースでは綺麗に旨くいってたのですが、
この上記のソースの追加でメニューバーを作りたいとおもってやったのですがうまくいきませんでした。
画像のソースの下へ追加
<ul>
　<li><a href="#">ホーム</a></li>
<li><a href="#">ストーリー</a></li>
<li><a href="#">キャラクター</a></li>
<li><a href="#">ペルソナ</a></li>
</ul>
を追加して

CSS　#header h1{
margin:0px;
padding:0px;
　　　　｝
下に
ul { list-style:none; margin:0; padding:0;}
li { display:block; float:left; width:80px;}
a {
　 display:block; line-height:1.3em; width:80px;
　 color:white; background-color:#FF0000;
　 font-size:14px; text-decoration:none;
　 text-align:center;
　 border-top:solid 1px #a3bac2;
　 border-left:solid 1px #a3bac2;
　 border-bottom:solid 1px #333766;
　 border-right:solid 1px #333766;
}
li a:hover { background-color:#00FFFF; color:#333333;}
をいれたらレイアウトがばらばらになってしまいました。
どうすれば綺麗にできるか教えてくださいませんか？