<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#"><span>ホーム</span></a></li>
<li id="food"><a href="#"><span>カフェフード</span></a></li>
<li id="drink"><a href="#"><span>カフェドリンク</span></a></li>
<li id="info"><a href="#"><span>インフォメーション</span></a></li>
<li id="contact"><a href="#"><span>お問い合わせ</span></a></li>
</ul>
</div>
</body>
</html>
@charset=""UTF-8;
/*reset*/
body, div, ul, li, a, span {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/*style*/
#nav {
width: 500px;
height: auto;
margin: 50px auto;
}
#nav li {
list-style: none;
float: left;
display: inline;
}
#nav li a {
width: 100px;
height: 40px;
display: block;
background: url(../img/btn1.jpg) no-repeat left top;
}
span {
visibility: hidden;
}
/*action*/
#nav #home a:link, #nav #home a:visited {
background-position: left top;
}
#nav #home a:hover {
background-position: left -48px;
}
#nav #food a:link, #nav #food a:visited {
background-position: -100px top;
}
#nav #food a:hover {
background-position: -100px -48px;
}
#nav #drink a:link, #nav #drink a:visited {
background-position: -200px top;
}
#nav #drink a:hover {
background-position: -200px -48px;
}
#nav #info a:link, #nav #info a:visited {
background-position: -300px top;
}
#nav #info a:hover {
background-position: -300px -48px;
}
#nav #contact a:link, #nav #contact a:visited {
background-position: -400px top;
}
#nav #contact a:hover {
background-position: -400px -48px;
}
