うーん、空白をどんな感じで使いたいのかよく分かりませんでしたので ご要望にあうかわかりませんが、簡単に組んでみました。イメージとしてはこんな感じでしょうか？ 【CSS部分】 #navi1 { margin:0; padding:0; width:200px; } #navi1 h2 { margin:0; /*念のため、消して崩れないなら消してもOK*/ padding:0; /*念のため、消して崩れないなら消してもOK*/ width: 200px; height:50px; overflow:hidden; /*念のため、消して崩れないなら消してもOK*/ text-indent:-9999px; background:#FF0000 url(タイトル画像のURL) left top no-repeat; } #navi1 dl,#navi1 ul,#navi1 dt,#navi1 dd { margin:0; padding:0; list-style:none; } #navi1 dt { width:200px; height:32px; text-indent:-9999px; overflow:hidden; /*念のため、消して崩れないなら消してもOK*/ background:#FFFF00 url(メニュータイトル画像のURL) left top no-repeat; } #navi1 dd ul { margin: 0 2px 0 2px; } #navi1 dd li { margin: 0; padding:0; background: url(リスト画像のURL) 2px top no-repeat; border-bottom: 1px dashed #CCCCCC; } #navi1 dd li a { padding: 4px 3px 4px 20px;/*最後のパディング数値はリスト画像の表示に合わせて調整*/ width:196px; display: block; background:#F3F0EA; color: #666; text-decoration: none; font-size: 11px; } #navi1 dd li a:hover { background:#E4DECF; } .imgmenu a { width:200px; height:32px; display:block; } .im01,.im02,.im03,.im04,.im05 { width:200px; height:32px; text-indent:-9999px; } .im01 {background:#FF0000 url(画像メニュー1の画像URL) left top no-repeat;} .im01 a:hover {background:#000000 url(画像メニュー1のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im02 {background:#FF3300 url(画像メニュー2の画像URL) left top no-repeat;} .im02 a:hover {background:#000000 url(画像メニュー2のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im03 {background:#FF6600 url(画像メニュー3の画像URL) left top no-repeat;} .im03 a:hover {background:#000000 url(画像メニュー3のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im04 {background:#FF9900 url(画像メニュー4の画像URL) left top no-repeat;} .im04 a:hover {background:#000000 url(画像メニュー4のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im05 {background:#FFCC00 url(画像メニュー5の画像URL) left top no-repeat;} .im05 a:hover {background:#000000 url(画像メニュー5のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ 【HTML部分】 <div id="navi1"> <h2>タイトル名</h2> <dl> <dt>メニュー</dt> <dd> <ul> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> </ul> </dd> </dl> <ul class="imgmenu"> <li class="im01"><a href="#">画像メニュー1</a></li> <li class="im02"><a href="#">画像メニュー2</a></li> <li class="im03"><a href="#">画像メニュー3</a></li> <li class="im04"><a href="#">画像メニュー4</a></li> <li class="im05"><a href="#">画像メニュー5</a></li> </ul> </div> positionやfloatはスタイルシートに入れていませんので #navi1　のスタイルシート部分に自力で追加してください また、わかりやすいようにbackground要素にムダにカラーコード入ってますので 消してください

　CSSがとっても解りにくいものになっていて何をしたいかわからないのでパスします。(これじゃ将来メンテナンス困るでしょうね。)カスケーディングスタイルシートですから、カスケーディングの仕組みを使いましょう。 　原因は、HTMLにも相当あるので、まずHTMLを直しましょう。Lynxでテストすると良いです。(Win日本語版もあります) 「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。」 　ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ 　技術に関するガイドライン 　 ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 ) 「テキストを画像に置き換えて表現する。」 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のも極力避けましょう。 <div id="navi1"> 　<h2><span>サイトマップ</span></h2> 　<ul> 　　<li><a href="#">yyy</a><!-- メインメニュー --> 　　　<ul><!-- サブメニュー --> 　　　　<li><a href="#">yyy</a></li> 　　　　<li><a href="#">yyy</a></li> 　　　　<li><a href="#">yyy</a></li> 　　　　<li><a href="#">yyy</a></li> 　　　　<li><a href="#">yyy</a></li> 　　　</ul> 　　</li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　　<li><a href=""></a></li> 　</ul> </div> とかじゃないのかな？subMenueがメインと思われる<ul>より上にあるのもおかしいような?? HTMLは、どのようにプレゼンテーションするかではなく、きちんと文書構造にしたがってマークアップする。そうすれば、CSSで自在に配置できます(将来横にしたいとか、プルダウンにしたいとか)し、そもそも簡潔になる。 　まず、HTMLを示してください。画像はとりあえず考えない。どの項目にどの画像を使うかがわかればよい。 　そのうえで、CSSを書きましょう。数分の一の量で済むし、解りやすくなるはずです。

どんな完成品にしたいのかが想像できないので、とりあえずの回答 文字メニューがズレるのは、コレをスタイルシートに加えてください #navi1 ul{ margin:0; padding:0; } どこかのテンプレートを加工したものかと思いますが、結構スタイルシートに粗があるように感じられます 例えばスタイルシートの　li　の横幅がwidth:190px; と指定されているのにHTMLではその内側に入るメニュー画像がwidth="200"とリストの190px の指定を超えるサイズになっているなどは崩れの原因の一端になると思います。 加工した画像でもなんでも構わないので完成予定図のようなものが分かれば修正はできそうですが、質問内容だけだとどの辺をどの程度なおせばよいのか判別しかねるので、部分的な修正箇所しか挙げられないです＾＾；