cssのfloatで右にメニューを出す方法を勉強し

質問

cssのfloatで右にメニューを出す方法を勉強しています。

ヘッダの左にロゴ（クリックをするとTOPへ飛ぶ）
右にメニューを横並びで表示したいです。
＿＿＿＿＿＿＿＿＿

■　　　■■■■
ロゴ　　メニュー
＿＿＿＿＿＿＿＿＿

のようにしたいのです。

例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、
メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると

☆★☆★css☆★☆★

/* abc */
#header ul.abc{
float:right;
margin: 0 ;
padding: 0 ;
width: 400px;
}

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

/* 01 */
#header ul.abc li.01 {
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.abc li.01 a {
display: block;
background: url(../img/01.jpg) no-repeat top left;
}

#header ul.abc li.01 a:hover {
display: block;
background: url(../img/01_om.jpg) no-repeat top left;

/* 02 */
#header ul.abc li.02 {
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.abc li.02 a {
display: block;
background: url(../img/02.jpg) no-repeat top left;
}

#header ul.abc li.02 a:hover {
display: block;
background: url(../img/02_om.jpg) no-repeat top left;

/* 03 */
#header ul.abc li.03 {
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.abc li.03 a {
display: block;
background: url(../img/03.jpg) no-repeat top left;
}

#header ul.abc li.03 a:hover {
display: block;
background: url(../img/03_om.jpg) no-repeat top left;

/* 04 */
#header ul.abc li.04 {
width:100px;
height:50px;
margin:0 0 0 0;
}

#header ul.abc li.04 a {
display: block;
background: url(../img/04.jpg) no-repeat top left;
}

#header ul.abc li.04 a:hover {
display: block;
background: url(../img/04_om.jpg) no-repeat top left;

☆★☆★html☆★☆★

<div id="header">
<div class="logo"><a href="">ロゴ</a></div>

<ul class="menu">
<li class="01"><a href=""01</a></li>
<li class="02"><a href="">02</a></li>
<li class="03"><a href="">03</a></li>
<li class="04"><a href="">04</a></li>
</ul>
<div class="clear"></div>
</div>

これは例なんですが、
この記述できると思ったのですが、うまくいかず困っています。
何か足りないのでしょうか？それともcssで何か勘違いをしているのでしょうか？
お手数をおかけしますが、ご教授お願いします。

回答No.1

metametamu · ベストアンサー

}の抜けている部分が多いので単純に記述ミスのところが多そうです。
もう少し重複する指定を減らすようにすれば見やすくなると思いますよ。
横幅がマージン分取られていなかったりもします。
あと、クラス名は数字からは始められません。英字、もしくは日本語に書き換えましょう。

/* menu */
#header ul.menu{
float:right;
margin: 0 ;
padding: 0 ;
}

#header ul.menu li {
float:left;
display: inline;
width:100px;
height:50px;
margin:0 10 0 0;
}

#header ul.menu li a {
display: block;
width:100px;
height:50px;
}

/* 01 */

#header ul.menu li.m01 a {
background: url(../img/01.jpg) no-repeat top left;
}

#header ul.menu li.m01 a:hover {
background: url(../img/01_om.jpg) no-repeat top left;
}

/* 02 */

#header ul.menu li.m02 a {
background: url(../img/02.jpg) no-repeat top left;
}

#header ul.menu li.m02 a:hover {
background: url(../img/02_om.jpg) no-repeat top left;
}

/* 03 */

#header ul.menu li.m03 a {
background: url(../img/03.jpg) no-repeat top left;
}

#header ul.menu li.m03 a:hover {
background: url(../img/03_om.jpg) no-repeat top left;
}

/* 04 */
#header ul.menu li.m04 {
margin:0;
}

#header ul.menu li.m04 a {
background: url(../img/04.jpg) no-repeat top left;
}

#header ul.menu li.m04 a:hover {
background: url(../img/04_om.jpg) no-repeat top left;
}

<ul class="menu">
<li class="m01"><a href=""01</a></li>
<li class="m02"><a href="">02</a></li>
<li class="m03"><a href="">03</a></li>
<li class="m04"><a href="">04</a></li>
</ul>

お礼

すごいです！！できました！！！

はじめに全ての「li」にマージンを指定して
最後の「０４」でマージンを０に指定するっていう方法があるんですね！！！

とても勉強になりました。

本当にありがとうございました。