<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q21</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
<ul>
<li id="news"><a href="#">新着情報</a></li>
<li id="inform"><a href="#">ニュース/お知らせ</a></li>
<li id="product"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</div>
</body>
</html>
@charset="UTF-8";
/*reset*/
body,ul,li,a {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/*layout*/
#nav {
width: auto;
height;autopx;
margin: 30px 0 0 30px;
}
#nav li {
list-style: none;
font-size: 18px;
border: 2px solid skyblue;
margin-bottom: 8px;
width: 200px;
height: 40px;
}
#nav li a {
text-decoration: none;
color: skyblue;
display: block;
font-weight: bold;
padding: 6px;
}
/*action*/
#nav li#product a:hover {
background-color: skyblue;
color: white;
}