CSSMENU

基本となるHTML

<ul class="menu">
<li><a href="#">MENU</a>
<li><a href="#">MENU</a>
<li><a href="#">MENU</a>
<li><a href="#">MENU</a>
<li><a href="#">MENU</a>
</ul>

SAMPLE01　マウスを置くと背景色変化

• MENU
• MENU
• MENU
• MENU
• MENU

ul.menu{ list-style : none; width:100px; font-size : 12px; text-align : left; padding:0; margin:0; } ul.menu li{ background-color:#ffffff; border-bottom:1px dotted #999999; } ul.menu a{ display:block; text-decoration : none; color:#999999; padding:2px; } ul.menu a:hover{ background-color:#eeeeee; color:#000000; }

SAMPLE02　マウスを置くと背景に画像

• MENU
• MENU
• MENU
• MENU
• MENU

ul.menu{ list-style : none; width:100px; font-size : 12px; text-align : left; padding:0; margin:0; } ul.menu li{ background-color:#ffffff; border-bottom:1px dotted #999999; } ul.menu a{ display:block; text-decoration : none; color:#999999; padding:2px; } ul.menu a:hover{ background:url(画像のアドレス); color:#000000; }

SAMPLE03　マウスを置くとメニューの前に画像

• MENU
• MENU
• MENU
• MENU
• MENU

ul.menu{ list-style : none; width:12px; font-size : 12px; text-align : left; background-color:#ffffff; padding:0; margin:0; } ul.menu li{ padding:2px 0; } ul.menu13 a{ text-decoration : none; color:#000000; padding:0 0 0 15px; } ul.menu a:hover{ color:#cc6600; background:url(マウスを置いたら表示される画像のアドレス) no-repeat left center; }

SAMPLE04　マウスを置くと画像が変化

• MENU
• MENU
• MENU
• MENU
• MENU

ul.menu{ list-style : none; font-size : 12px; text-align : left; background-color:#ffffff; padding:0; margin:0; } ul.menu li{ padding:2px 0; } ul.menu a{ text-decoration : none; color:#000000; background:url(最初に表示されてる画像のアドレス) no-repeat left center; padding:0 0 0 15px; } ul.menu a:hover{ background:url(マウスを置いた時の画像のアドレス) no-repeat left center; }