メニュー反転

今日は引き続き、メニューをHTMLとCSSで作ってみました。

メニュータグにカーソルを合わせると、色が変わるのと範囲を指定しました。

まずHTMLで下のように記述し

<li><a href="">HOME</a></li>

CSSの記述は

li {

width:120px;

list-style:none;

float:left;

text-align:center;

font-size:14px;

border-right:none;

}

li a {

padding:15px;

display:block;

text-decoration:none;

color:#696969;

background:#f96dc0;

border-right:1px solid #fff;

background:#f96dc0 url(画像のファイルパス) no-repeat 105px 96%;

}

li a:hover {

color:#fff;

background:#df108a url(画像のファイルパス) no-repeat 105px 50%;

}