Web制作課題Q23

課題

HTML

<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">ニュース/お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>

CSS

ul {
  width: 200px;
}
li {
  list-style-type: none;
  height: 40px;
  margin-bottom: 8px;
  border: 2px solid #6495ed;
}
a{
  display: block;
  padding-left: 10px;
  width: auto;
  height: 40px;
  color: #65A6FF;
  line-height: 40px;
}
a:hover{
  color: #ffffff;
  background: #6495ed;