[新着] Webテンプレートを仮オープンしました
/***************スタイルシート**************/
#h_menu {
float: left;
width: 800px;
}
#h_menu ul {
margin: 0 0 0 0px;
padding: 0;
list-style: none;
}
#h_menu li,#h_menu a{
float: left;
display: block;
width: 160px;
height: 32px;
text-indent: -9999px;
background-image: url(../img/menu.gif);
}
#h_menu02 a { background-position: -160px 0}
#h_menu03 a { background-position: -320px 0 }
#h_menu04 a { background-position: -480px 0 }
#h_menu05 a { background-position: -640px 0 }
#h_menu01 a:hover { background-position: 0 -32px }
#h_menu02 a:hover { background-position: -160px -32px }
#h_menu03 a:hover { background-position: -320px -32px }
#h_menu04 a:hover { background-position: -480px -32px }
#h_menu05 a:hover { background-position: -640px -32px }
/*************スタイルシートここまで***************/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>ホームページ</title>
<link href="css/form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1 id="header">ホームページ</h1>
</div>
<div id="h_menu">
<ul>
<li id="h_menu01"><a href="index.html">ホーム</a></li>
<li id="h_menu02"><a href="menu/menu1.html">メニュー1</a></li>
<li id="h_menu03"><a href="menu/menu2.html">メニュー2</a></li>
<li id="h_menu04"><a href="menu/menu3.html">メニュー3</a></li>
<li id="h_menu05"><a href="menu/menu4.html">メニュー4</a></li>
</ul>
</div>
</body>
</html>【備考】a:hover{text-decoration:none;}これじゃだめ?(未検証につきダメならごめんなさい)