右も左も分からない超初心者なのです。

現在、EC-CUBE asp版のお試し版でデザインのカスタマイズの練習中なのですが、ヘッダー部分下にnaviというボックスを作成して、
naviバーを横に５つ並べたいのですが、レイアウト崩れを起こしてしまいます。どなたか、教えていただけないでしょうか？
よろしくお願いします＞＜


http://trial565.eccube-asp.net/

html----------------------------------------------------
<div id="navi">
<ul>
<li><a href="#">トップページ</a></li>
<li><a href="http://trial565.eccube-asp.net/user_data/test1.php" title="test1">お買物の流れ</a></li>
<li><a href="#">お支払い・送料</a></li>
<li><a href="#">よくある質問</a></li>
<li><a href="#">会社案内</a></li>
</ul>
</div>


css-----------------------------------------------------
/* ヘッダメニューを消去するサンプルコード */
#header_menu {
display: none;
}

body {
font-size: 62.5%;
line-height:1.7em;
}

#navi{
width:966px;
margin:0 auto;
}

#navi ul {
width:966px;
list-style:none;
font-size:14px;
font-weight:600;
text-align:center;
margin:0;
padding:0;
}

#navi li {
width:150px;
height:40px;
margin:0;
padding:0;
float:left;
}

#navi a {
display:block;
width:100%;
height:40px;
background-image:url(/user_data/upload/save_image/navi.jpg);
background-repeat:no-repeat;
text-decoration:none;
padding:10px 0;
}

#navi a:hover{
height:40px;
background-color:#F9C;
padding:10px 0;
}

#navi a:hover{
background:url(/user_data/upload/save_image/navi_hover.jpg) no-repeat;
}

シンプルなHTML/CSS上の構成上の問題ですので、詳しくはその手の学習サイトを確認されることをお勧めします。
また、下記を一読されて質問をされると良いと思います。

http://xoops.ec-cube.net/modules/tinyd0/index.php?id=8

その上で軽くみた限りですが、単に<div id="header"></div>の部分があるために回り込んでいるだけかと思いますので、CSSの回り込み状態や順を確認し、必要に応じて回り込み解除などを挟む必要があると思います。

----------------
EC-CUBE公式エヴァンジェリスト
EC-CUBEインテグレートパートナー (株)スピリット・オブ
移転・拡張・高速化・問題解決
各種カスタマイズ・支援依頼承ります。
[url=h

アドバイス、ありがとうございます！

ご指摘のように回り込みの解除の設定をしたら、解決しました。
お騒がせしました＞＜