こちらはヘッダー下にメニューをつけるＣＳＳ部分です
先に ヘッダー下に横メニューをつけちゃう(設置編)
をお読みください
参考： CSS メニューを作っちゃおう5（横メニュー1）
↓マウスをのっけてみてください・・
ＣＳＳです・・・
/*横メニュー(CSS1)*/
#topmenu{
font-size:14px;/*文字サイズ変更不可*/
font-weight:normal;/*太字にするにはnormal→boldに*/
width: 980px;/*全体の幅*/
margin:10px 0 20px;/*メニューの上と下のスキマ 上Ａ 0 下Ｂ*/
display: block;
line-height:2;
}
#topmenu ul{
margin:0;
padding:0 0 0 30px;/*メニュー右端Ｃ*/
height:30px;/*メニューの縦*/
background-color:#009900;/*背景色Ｄ*/
list-style-type:none;
}
#topmenu ul li{
width:100px;/*メニュー1つの幅Ｅ*/
margin:0;
padding:1px 0;/*Ｆ*/
text-align:center;
float:left;
}
#topmenu ul li:first-child{
border-left: 1px solid #ffffff;/*メニュー左の縦線Ｇ*/
}
#topmenu li a{
color:#ffffff;/*文字色*/
background-color:#009900;/*背景色Ｈ*/
border-right: 1px solid #ffffff;/*メニュー右の縦線Ｉ*/
display: block;
text-decoration:none;
}
#topmenu li a:hover{/*マウスオーバー時*/
color:#333333;/*文字色Ｊ*/
background-color:#33ff99;/*背景色Ｋ*/
}
※このメニューは文字サイズを変更しないでください
#topmenu{
font-size:16px;/*文字サイズ変更不可*/
font-weight:normal;/*太字にするにはnormal→boldに*/
width: 980px;/*全体の幅*/
margin:10px 0 20px;/*メニューの上と下のスキマ 上Ａ 0 下Ｂ*/
display: block;
line-height:1.7;
}
この組み合わせはＯＫです
たとえば・・・
↓マウスをのっけてみてください・・
/*横メニュー(CSS1)*/
#topmenu{
font-size:14px;/*文字サイズ*/
font-weight:normal;/*太字にするにはnormal→boldに*/
width: 980px;/*全体の幅*/
margin:10px 0 20px;/*メニューの上と下のスキマ 上Ａ 0 下Ｂ*/
display: block;
line-height:2;
}
#topmenu ul{
margin:0;
padding:0 0 0 30px;/*メニュー右端Ｃ*/
height:30px;/*メニューの縦*/
background-color:#ffccff;/*背景色Ｄ*/
list-style-type:none;
background-image:url(http://stat.ameba.jp/blog/ucs/img/char/char2/182.gif);
background-repeat:no-repeat;
background-position:8px center;
}
#topmenu ul li{
width:100px;/*メニュー1つの幅Ｅ*/
margin:0;
padding:1px 0;/*Ｆ*/
text-align:center;
float:left;
}
#topmenu ul li:first-child{
border-left: 1px solid #ffffff;/*メニュー左の縦線Ｇ*/
}
#topmenu li a{
color:#ff00ff;/*文字色*/
background-color:#ffccff;/*背景色Ｈ*/
border-right: 1px solid #ffffff;/*メニュー右の縦線Ｉ*/
display: block;
text-decoration:none;
}
#topmenu li a:hover{/*マウスオーバー時*/
color:#ffffff;/*文字色Ｊ*/
background-color:#ff00ff;/*背景色Ｋ*/
}