ヘッダ付近での使用を想定した横型のメニューです。
/* --- ナビゲーションバー --- */ .nav { width: 100%; /* ナビゲーションの幅 */ background: #000000 url(hor_menu4_back1.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #333333 solid; /* 上枠線 */ border-bottom: 1px #666666 solid; /* 下枠線 */ font-size: 80%; } /* --- メニューエリア --- */ .nav .nl { width: 600px; /* メニューの幅 */ margin: 0 auto; /* センターに配置 */ padding: 0; background: #000000 url(hor_menu4_back1.gif) repeat-x top; /* メニューの背景 */ border-left: 1px #333333 solid; /* メニューの左枠線 */ border-right: 1px #666666 solid; /* メニューの右枠線 */ list-style-type: none; text-align: center; } /* --- メニュー項目 --- */ .nav .nl li { width: 20%; /* 項目の幅 */ float: left; } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ border-left: 1px #666666 solid; /* リンクエリアの左枠線 */ border-right: 1px #333333 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ font-weight: bold; /* 太字 */ } /* --- リンクテキストの色 --- */ .nav .nl li a:link { color: #ffffff; } .nav .nl li a:visited { color: #ffffff; } .nav .nl li a:hover { color: #ff8000; } .nav .nl li a:active { color: #ff8000; } /* --- clearfix --- */ .clearFix:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } .clearFix { min-height: 1px; }
<div class="nav"> <ul class="nl clearFix"> <li><a href="#">メニュー項目1</a></li> <li><a href="#">メニュー項目2</a></li> <li><a href="#">メニュー項目3</a></li> <li><a href="#">メニュー項目4</a></li> <li><a href="#">メニュー項目5</a></li> </ul> </div>