gomiichan's diary

WEB初心者の勉強奮闘記です☆

ボタン作成とHTML、CSS練習（8/9） 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/banner.css">
</head>
<body>
<div id="nav">
<ul>
<li id="contact"><a href="#">お問い合わせ</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#">カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="home"><a href="#">ホーム</a></li>
</ul>
</div>
</body>
</html>



@charset "utf-8";
/* CSS Document */
html,body,div,ul,li{
  margin:0;
  padding:0;
  line-height:1.0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
/* nav */

}
#nav {
  width: 801px;
  height: 50px;
 margin: 50px 0 0 50px;

}
#nav li{
  float:left;
display: inline;

}
#nav li a{
 width: 160px;
 height: 50px;
 display: block;
 white-space: nowrap;
 background: url(../img/banner0810.jpg)no-repeat;
 overflow: hidden;
 text-indent: 100%;
}
#nav li#contact a {
 backgroud-position:left top;
}
#nav li#contact a:hover,#nav li#contact a:active{
backgroud-position:left -60px;
}
#nav li#food a{
 backgroud-position:-160px 0;
}
#nav li#contact a:hover,#nav li#food a:active{
backgroud-position:-160px -60px;
}
#nav li#drink a{
 backgroud-position:-320px 0;
}
#nav li#contact a:hover,#nav li#drink a:active{
backgroud-position:-320px -60px;
}
#nav li#info a{
 backgroud-position:-480px 0;
}
#nav li#contact a:hover,#nav li#info a:active{
backgroud-position:-480px -60px;
}
#nav li#info a{
 backgroud-position:-640px 0;
}
#nav li#contact a:hover,#nav li#info a:active{
backgroud-position:-640px -60px;
}