【CSS】リストタグで横並びのメニューを作成する＜１＞

<li>リスト要素を使って展開するメニューを紹介します。

CSS：全体枠

<style>
.topmenuitem{
　padding: 0;
　width: 100%;
　border-top: 5px solid #D10000;
　background: #fff;
}

.topmenuitem ul{
　margin:0;
　margin-left: 10px;
　padding: 0;
　list-style: none;
}

border-top: 5px solid #D10000;

：上段部枠の幅(太さ)、枠線の形、背景色;

margin-left: 10px;

：ブラウサと一番左メニューの間の間隔;

CSS：各メニューリスト

.topmenuitem li{
　display: inline;
　margin: 0 2px 0 0;
　padding: 0;
　text-transform:uppercase;
}

display: inline;

：<li>要素がブロックレベルのため、縦並びを横並び(インライン要素)に変換させる。

text-transform:uppercase;

：英文字を全て大文字に表示させる

リンク<a>

.topmenuitem a{
　display: block;
　float: left;
　color: black;
　text-decoration: none;
　margin: 0 1px 0 0;
　padding: 5px 10px 9px 10px; 
　background-color: white; 
　-moz-border-radius-bottomleft: 3px;
　border-bottom-left-radius: 3px;
　-moz-border-radius-bottomright: 3px;
　border-bottom-right-radius: 3px;
}

display: block;

：インライン要素<a>をブロックレベル要素にさせる。

float: left;

：リストメニューを左寄せにする

.topmenuitem a:hover{
　background-color: #D10000; 
　padding-top: 9px;
　padding-bottom: 5px; 
　color: #FFF;
}

.topmenuitem .ima a{
　background-color: #D10000; 
　padding-top: 9px; 
　padding-bottom: 5px; 
　color: #FFF;
}

</style>

.topmenuitem a:hover{

：マウスカーソルを当てた時。

.topmenuitem .ima a{

：現在選択されているリスト

<body>

<body>
 <div class="topmenuitem">
  <ul>
   <li class="ima"><a href="#toppage" title="TOP Page">TOP Page</a></li>
   <li><a href="#1" title="menu1">menu1</a></li>
   <li><a href="#2" title="menu2">menu2</a></li>
   <li><a href="#3" title="menu3">menu3</a></li>
  </ul>
 </div>

</body>

<MENU>

<style>
.topmenuitem{
　padding: 0;
　width: 100%;
　border-top: 5px solid #D10000;
　background: #fff;
}

.topmenuitem ul{
　margin:0;
　margin-left: 10px;
　padding: 0;
　list-style: none;
}

.topmenuitem li{
　display: inline;
　margin: 0 2px 0 0;
　padding: 0;
　text-transform:uppercase;
}

.topmenuitem a{
　float: left;
　display: block;
　color: black;
　text-decoration: none;
　margin: 0 1px 0 0;
　padding: 5px 10px 9px 10px; 
　background-color: white; 
　-moz-border-radius-bottomleft: 3px;
　border-bottom-left-radius: 3px;
　-moz-border-radius-bottomright: 3px;
　border-bottom-right-radius: 3px;
}

.topmenuitem a:hover{
　background-color: #D10000; 
　padding-top: 9px;
　padding-bottom: 5px; 
　color: #FFF;
}

.topmenuitem .current a{
　background-color: #D10000; 
　padding-top: 9px; 
　padding-bottom: 5px; 
　color: #FFF;
}

</style>