cssのulタグについて質問です。

質問

cssの初心者ですがよろしくお願いします。

以下内容です。
#headerの中にulタグで
float:left;
display: inline;
を使って横のメニューを作りました。
その下に幅いっぱいの画像を入れたかったので
一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。
そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが
２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている）
画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。
cssで指定している画像の大きさも間違いありません。

試しに上のメニューを<div id="header">にして
<div class="clear"></div>で区切って
下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。

htmlはこれです
<div id="header">
<ul class="yama">
<li class="logo"><a href>ロゴ</a></li>
<li class="kyouiku"><a href="">教育</a></li>
<li class="syoukai"><a href="">紹介</a></li>
<li class="shizen"><a href="">自然</a></li>
<li class="mura"><a href="">村</a></li>
</ul>

<div class="clear"></div>
<div class="line"></div>

<ul class="rei">
<li class="name"><a href="">あいうえお</a></li>
<li class="abc"></li>
<li class="map"><a href="">マップ</a></li>
</ul>
</div>

<li class="name"><a href="">あいうえお</a></li>これが問題のタグです。

文字が足りなかったのでcssの一部ですが
/* rei */
#header ul.rei{
float:left;
}

#header ul.rei li{
float:left;
display: inline;
}

で　<li class="name">　のcssですが

#header ul.rei li.name {
display: block;
width:295px;
height:51px;
}

#header ul.rei li.name a {
display: block;
background: url(../img/name.jpg) no-repeat top left;
text-indent:-9999px;
height:100%;
width:100%;
}

#header ul.rei li.name a:hover {
display: block;
text-indent:-9999px;
height:100%;
width:100%;
background: url(../img/name_om.jpg) no-repeat top left;
}

という風にしています。
初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。

回答No.1

metametamu · ベストアンサー

/* rei */
#header ul.rei{
float:left;
}

#header ul.rei li{
float:left;
display: inline;
}

#header ul.rei li.name a {
display: block;
background: url(../img/name.jpg) no-repeat top left;
width:295px;
height:51px;
text-indent:-9999px;
}

#header ul.rei li.name a:hover {
background: url(../img/name_om.jpg) no-repeat top left;
}

こんな感じでどうでしょう？
#header ul.rei li.name { }
は必要ないので消してください。

それとなんとなく用途が想像できますが、この部分は修正しておくといいと思います。
空のdivは文法上おかしいので。

<div class="clear"></div>
<div class="line"></div>

まずclearをしているdivは内容が特にないのであればlineの方に統合しましょう。

<div class="line"></div>

.line{
clear:left;
}

それで、もしlineが線を引いたりするだけのために置いてあるのであれば、ulに統合します。

#header ul.rei{
float:left;
clear:left;
border-top:1px solid black; /* 線 */
padding-top:30px; /* 線からの余白 */
}

お礼

ありがとうございます！！
とても詳しくご教授いただき勉強になりました。
さっそくやってみます＾＾
本当にありがとうございました。