支援訓練 28日目

html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="css/style090.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
<div id="header">
<ul>
<li class="home"><span>ホーム</span></li>
<li class="food"><span>カフェフード</span></li>
<li class="drink"><span>カフェドリンク</span></li>
<li class="info"><span>インフォメーション</span></li>
<li class="contact"><span>お問い合わせ</span></li>
</ul>
</div>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */
body, ul, li, div {
  margin: 0;
  padding: 0;
}
div#header ul {
  list-style: none;
  overflow: hidden;
}
div#header ul li {
  float: left;
  display: block;
  width: 160px;
  height: 50px;
}
span {
  display: none;
}
.home {
  background: url(../img/menu.jpg) no-repeat;
}
.home:hover{
  background: url(../img/menu.jpg) no-repeat 0px -60px;
}
.food {
  background: url(../img/menu.jpg) -160px 0px;
}
.food:hover {
  background: url(../img/menu.jpg) -160px -60px;
}
.drink {
  background: url(../img/menu.jpg) -320px 0px;
}
.drink:hover{
  background: url(../img/menu.jpg) no-repeat -320px -60px;
}
.info {
  background: url(../img/menu.jpg)  -480px 0px;
}
.info:hover{
  background: url(../img/menu.jpg) -480px -60px no-repeat;
}
.contact {
  background: url(../img/menu.jpg)  -640px 0px;
}
.contact:hover{
  background: url(../img/menu.jpg) -640px -60px no-repeat;
}