<li>による横並びメニューの記述法

質問

こんにちは。
CSSで<li>を使って横並びメニューを作っているのですが、メニューのイメージとイメージの隙間を空けるにはどうすればよいのでしょうか？

現在の記述はこうです。

-----------------html------------------------
<div id="menu">
<ul>
<li id="menu01"><a href="index.html"></a></li>
<li id="menu02"><a href="business.html"></a></li>
</ul>
</div><!--menu-->

-----------------css------------------------
#menu ul{
margin:95px 0 0 25px;
padding:0;
width:100%;
float:left;
list-style:none;
}

#menu ul li {
float:left;
}

#menu ul a{
text-decoration:none;
display:block;
width:125px;
height:30px;
}

#menu ul a:hover{
text-decoration:none;
display:block;
width:125px;
height:30px;
}

#menu01 a{
background-image:url(img/menu01a.gif);
background-left:0 0;
}

#menu01 a:hover{
background-image:url(img/menu01b.gif);
background-position:0 0;
}

#menu02 a{
background-image:url(img/menu02a.gif);
background-position:0 0;
}

#menu02 a:hover{
background-image:url(img/menu02b.gif);
background-position:0 0;
}

現状だと、画像（menu01.gif）と画像（menu02.gif）がどうしてもつながってしまうんです。

どなたかご教授いただけませんでしょうか。

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

回答No.1

naokita · ベストアンサー

<a href="index.html"></a> は危ないかな。
#menu ul a:hover{ は不要かな。
必要ならbackground関連でも全統一設定しておけば良いかも。
基本的には、
a　も　a:hover　も同じ内容なら a:hover の重複分不要。
background-left:0 0;　これは？

=====================
実際、ケースバイケースだけど、

<a href="index.html">○○</a>
で、
画像置換えを利用するとか、

#menu ul li{
float:left;
width:130px; /* こうとか */
}

#menu02 a{
background:url(img/menu02a.gif) 2px 0 no-repeat;
/* こうとか */
}

他にも色々と・・・