リストをナビゲーションに

CSS課題

解答（角丸は途中）
http://felica.boy.jp/css-kadai/0527

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーションの復習</title>
<link rel="stylesheet" href="nav.css" media="screen, print">
</head>
<body>
<div id="tate">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
<div id="yoko">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
<div id="sprite">
<ul>
<li id="home"><a href="#"><em>home</em></a></li>
<li id="food"><a href="#"><em>food</em></a></li>
<li id="drink"><a href="#"><em>drink</em></a></li>
<li id="info"><a href="#"><em>info</em></a></li>
<li id="contact"><a href="#"><em>contact</em></a></li>
</ul>
</div>
<div id="radius">
<ul>
<li id="home"><a href="#"><em>home</em></a></li>
<li id="food"><a href="#"><em>food</em></a></li>
<li id="drink"><a href="#"><em>drink</em></a></li>
<li id="info"><a href="#"><em>info</em></a></li>
<li id="contact"><a href="#"><em>contact</em></a></li>
</ul>
</div>
</body>
</html>

@charset "UTF-8";

#tate ul {
  list-style-type: none;
}
#tate li {
  background-color: #76ad74;
  margin-bottom: 2px;
  padding: 5px;
  width: 100px;
}
#tate li a {
  color: #fff;
  text-decoration: none;
}

#yoko {
  overflow: hidden;
}

#yoko ul {
  list-style-type: none;
}
#yoko li {
  background-color: #76ad74;
  margin-bottom: 2px;
  padding: 5px;
  width: 100px;
  float: left;
  text-align: center;
  margin-right: 2px;
}
#yoko li a {
  color: #fff;
  text-decoration: none;
}

em {
  visibility: hidden;
}

#sprite ul {
  padding-top: 20px;
  list-style-type: none;
}

#sprite li a{
  width: 152px;
  height: 52px;
  display: block;
}

#home a{
  background-position: 0 0;  
  background-image: url(sprite.jpg);
}
#food a{
  background-position: 0 -52px;  
  background-image: url(sprite.jpg);
}
#drink a{
  background-position: 0 -104px;  
  background-image: url(sprite.jpg);
}
#info a{
  background-position: 0 -156px;  
  background-image: url(sprite.jpg);
}
#contact a{
  background-position: 0 -208px;  
  background-image: url(sprite.jpg);
}

#home a:hover,a:active{
  background-position: -152px 0;  
  background-image: url(sprite.jpg);
}
#food a:hover,a:active{
  background-position: -152px -52px;  
  background-image: url(sprite.jpg);
}
#drink a:hover,a:active{
  background-position: -152px -104px;  
  background-image: url(sprite.jpg);
}
#info a:hover,a:active{
  background-position: -152px -156px;  
  background-image: url(sprite.jpg);
}
#contact a:hover,a:active{
  background-position: -152px -208px;  
  background-image: url(sprite.jpg);
}

#radius {
  border-radius: 4px;
}

#radius ul {
  padding-top: 20px;
  list-style-type: none;
  }

#radius li {
  float: left;
}

#radius li a {
  width: 152px;
  height: 52px;
  display: block;
}