荒川区町屋ホームページ制作マウンテンブック

HTML

• List1


• List2


• List3


• List4

強調されてるところが味噌な行。それ以外はとりあえずの見栄えの設定になっています。
コピーペーストですぐに使用できるように作りましたが、id名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。

CSS

ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;/* 必ずwidthの設定をしてください */
}

ul#globalNavi::after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}

ul#globalNavi li {
margin: 0;
padding: 0;
float: left;
width: 120px;
line-height: 1;
list-style-type: none;
}

ul#globalNavi li a {
padding: 0.6em 10px; /* ボタンの厚みはここで調整 */
display: block;
position: relative; /* IE6でマウス反応領域がおかしいのをFix */
font-size: 12px;
color: #333;
text-align: center;
text-decoration: none;
background-color: #eee;
}

ul#globalNavi li a:hover {
color: #000;
background-color: #ddd;
}

れを基本に、背景画像を入れたりpaddingを調整すれば色々作れるはず。
li要素がフロートすることによって、包含ブロックであるul要素は高さの算出する子要素がなくなり、ぺっちゃんこになってしまうので、擬似要素によるクリアをコード中にいれています。もし、MAC IEに対応する必要がある場合は、ul#globalNaviには次のコードを追加してください。

ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;
/* for MacIE5.x \*//*/
overflow: hidden;
/* end */
}

WIN IE6では親要素がposition: absoluteしないと何故かA要素のマウス反応範囲が消えてしまうので、absoluteしない場合はA要素にposition: relative;が必要。