cssでロールオーバーを横並びにする記述方法のご教示をよろしくお願いい

質問

cssでロールオーバーを横並びにする記述方法のご教示をよろしくお願いいたします。

htmlには以下の記述をしてあります。

［html］
<div id="menu">
<ul>
<li id="menu1"><a href="a/index.html" title="HOME" ></a></li>
<li id="menu2"><a href="b/index.html" title="ホームページ製作"></a></li>
<li id="menu3"><a href="c/index.html" title="ネットショツプ製作"</a></li>
<li id="menu4"><a href="d/index.html" title="SNSサイト製作"></a></li>
<li id="menu5"><a href="e/index.html" title="SEOプロモーション"></a></a></li>
<li id="menu6"><a href="f/index.html" title="出版・印刷・その他"></a></a></li>
<li id="menu7"><a href="g/index.html" title="お問合せ・御注文"></a></li>
</ul>
</div>

ここまでは、出来たのですが、その後のcssでどのように記述をして良いのかわからなくなってしまいました。Okwave様で何度かご質問もさせて頂き、とてもためになるご教示も頂いたのですが、どうしてもうまくいかなく難議しているところで御座います。htmlの記述は上記のように出来たのですが・・・

画像については、以下にアップしました。よろしかったら見てみてください。

http://desktop10.web.fc2.com/test.html

どうか初心者の私にご教示のほどよろしくお願いいたします。

回答No.1

zeff · ベストアンサー

#menu ul{
list-style-type:none;
}
/* 一列に並べる */
#menu ul li{
display:inline;
}

<div id="menu">
<ul>
<li id="menu1"><a href="a/index.html" title="HOME" ><img src="menu1の元画像URL" alt="HOME" onmouseover="this.src='menu1のオンマウス画像URL' onmouseout="this.src='menu1の元画像URL'" /></a></li><li id="menu2"><a href="b/index.html" title="ホームページ製作"></a></li>
<li id="menu3"><a href="c/index.html" title="ネットショツプ製作"</a></li><li id="menu4"><a href="d/index.html" title="SNSサイト製作"></a></li><li id="menu5"><a href="e/index.html" title="SEOプロモーション"></a></a></li><li id="menu6"><a href="f/index.html" title="出版・印刷・その他"></a></a></li><li id="menu7"><a href="g/index.html" title="お問合せ・御注文"></a></li>
</ul></div>

<li id="menu1">のみ書き換えましたが、
<li id="menu2">以降も同じように記述してください。
</li>の後が改行してあるとIE6で間が空いてしまうようなのでくっつけてください。

各メニューの画像ってバラバラになっているのでしょうか？
そうだと思って回答したのですが、
もし一体になっていたらロールオーバーは出来ません。

お礼

zeff様。この度はありがとう御座いました。またご縁がありましたときはよろしくお願いいたします。
ありがとう御座いました。

補足

zeff様。ご回答ありがとう御座います。早速実行させて頂きましたところ残念ですが成功できませんでした。以下にアップをしてみました。よろしければ見てみてください。

http://desktop10.web.fc2.com/test.html

画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に
ページでエラーが発生しました。と出てしまいます。
お手数では御座いますが再度のご指導をお願いできませんでしょうか？

よろしくお願いいたします。