背景色を全部変えてみました。赤,橙,黄,緑,青,紫
★☆★☆★☆ ナウでヤングなレンタルサーバー！ロリポップ！ ☆★☆★☆★
月額２６３円で容量１ＧＢ
Movable TypeやWordpressだって使えるよ。
サンプルソース
<html>
<head>
<title>横並びナビゲーションメニュー</title>
<style type="text/css">
<!--
.Mbox1{
width : 570px;
}
.List-ul{
list-style-type : none; /*リストマークなし*/
}
.List-li{
float : left;
width : 90px; /* 「li」タグの幅 */
background-color : #defafe; /* 背景色 */
text-align : center; /* 文字位置 中央 */
margin-right : 2px; /* 右のマージン 余白 */
}
.List-li a{
color : blue; /* 「li」タグのリンク文字の色 */
font-weight : bold; /* 文字の太さ 太い */
text-decoration : none; /* 文字飾り なし */
line-height : 1.5em; /* 行の高さ*/
border-width : 1px; /* ボーダーの幅 */
border-style : solid; /* 実線 */
border-color : #c9c9c9; /* 色 */
display: block;
}
.List-li a:hover{ /*マウスポインタがリンクの上に来た時*/
color : white; /* 「li」タグのリンク文字の色 */
text-decoration : underline; /* 文字飾り 下線 */
}
-->
</style>
</head>
<body>
<div class="Mbox">
<ul class="List-ul">
<li class="List-li" onmouseover ="this.style.background='red'"
onmouseout ="this.style.background='#defafe'"><a href="#">Topページ</a></li>
<li class="List-li" onmouseover ="this.style.background='orange'"
onmouseout ="this.style.background='#defafe'"><a
href="#">Javascript</a></li>
<li class="List-li" onmouseover ="this.style.background='yellow'"
onmouseout ="this.style.background='#defafe'"><a
href="#">CSS</a></li>
<li class="List-li" onmouseover ="this.style.background='green'"
onmouseout ="this.style.background='#defafe'"><a
href="#">画像全般</a></li>
<li class="List-li" onmouseover ="this.style.background='blue'"
onmouseout ="this.style.background='#defafe'"><a
href="#">マウス操作</a></li>
<li class="List-li" onmouseover ="this.style.background='purple'"
onmouseout ="this.style.background='#defafe'"><a
href="#">テーブル</a></li>
</ul>
</div>
</body>
</html>
float 回り込みを設定するプロパティです。
float : left; // li要素を横に並べます。
floatプロパティ float:left; float:right;
display: block; // ブロックレベル要素のように表示させます。li要素でもクリックが可能になります。
スタイルシート css を使った横並びリストメニュー
onmouseover ="this.style.background='red'"
onmouseout ="this.style.background='#defafe'"
onmouseover はマウスが領域の上に乗った時に発生するイベントです。
this は自分自身の要素です。この場合は"li"タグになります。
マウスが乗った時この要素のスタイル.背景色を'red'に変えます。
onmouseout はマウスが領域を去った時です。背景色を元の色'#defafe'に戻します。
マウスオーバーイベント
画像にマウスを乗せると説明文を表示します。
onmouseover マウスが上にくると画像が拡大します。
