ヘッダ付近での使用を想定した横型のメニューです。
/* --- ナビゲーションバー --- */ .nav { width: 100%; /* ナビゲーションの幅 */ background-color: #f9f9f9; /* ナビゲーションの背景色 */ border-top: 1px #cccccc solid; /* 上枠線 */ border-bottom: 1px #cccccc solid; /* 下枠線 */ font-size: 80%; } /* --- メニューエリア --- */ .nav .nl { width: 100%; /* メニューの幅 */ margin: 0; padding: 4px 0; /* メニューのパディング(上下、左右) */ list-style-type: none; text-align: center; } /* --- メニュー項目 --- */ .nav .nl li { float: left; } /* --- 項目の幅(emで指定) --- */ .nav .nl li.item1 { width: 9.5em; } .nav .nl li.item2 { width: 4em; } .nav .nl li.item3 { width: 7.5em; } .nav .nl li.item4 { width: 6em; } .nav .nl li.item5 { width: 4.6em; } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 2px 5px; /* リンクエリアのパディング(上下、左右) */ border-right: 1px #cccccc solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .nav .nl li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- clearfix --- */ .clearFix:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } .clearFix { min-height: 1px; }
<div class="nav"> <ul class="nl clearFix"> <li class="item1"><a href="#">ホームページ作成</a></li> <li class="item2"><a href="#">HTML</a></li> <li class="item3"><a href="#">スタイルシート</a></li> <li class="item4"><a href="#">JavaScript</a></li> <li class="item5"><a href="#"></a></li> </ul> </div>