CSS6〜7 ボックスモデル練習

【CSS06】

以下の画像と同じように表示させるCSSを記述しなさい
文字の擬似クラスも設定しなさい（色は自由選択）
XHTML 1.0 Transitional
記述場所はエンベッド
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-style-Type" content="text/css" />
<title>【CSS06】</title>
<style type="text/css">
<!--
 * {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}
img {
  border: none;
}
body {
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo, 
  "メイリオ", 
  Osaka, 
  "MS P Gothic", 
  "ＭＳ Ｐゴシック", 
  sans-serif;
  text-align: center;/*IE6でブラウザの中央表示*/
  padding-top: 10px;
}
#container {
  margin: 0 auto;/*ブラウザの中央表示*/
  text-align: left;
  width: 740px;
  background-color: #F5F6F1;
  padding: 10px;
}
a {
  font-weight: bold;
  text-decoration: none;
}
#navi li {
  height: 100px;
  margin-top: 8px;
}
#navi li a:link {
  color: #fff;
}
#navi li a:visited {
  color: #ff99cc;
}
#navi li a:hover {
  color: #ccccff;
}
#navi li a:active {
  color: #ffff99;
}
#navi01 {
  background-image: url(images/navi01.gif);
  background-repeat: no-repeat;
}
#navi02 {
  background-image: url(images/navi02.gif);
  background-repeat: no-repeat;
}
#navi03 {
  background-image: url(images/navi03.gif);
  background-repeat: no-repeat;
}
#navi04 {
  background-image: url(images/navi04.gif);
  background-repeat: no-repeat;
}
#info {
  text-align: right;
}
#info li {
  display: inline;
  font-size: 0.75em;
  margin-right: 10px;
}
#info li a {
  color: #8acafb;
}
address {
  color: #a2b6e6;
  text-align: center;
  font-style: normal;
  font-size: 0.75em;
}
-->
</style>
</head>
<body>
<div id="container">
<h1><img src="images/header.gif" alt="TAG Design" title="TAG Design" width="740" height="115" /></h1>
<ul id="navi">
<li id="navi01"><a href="#">>> About Us</a></li>
<li id="navi02"><a href="#">>> Works</a></li>
<li id="navi03"><a href="#">>> Access</a></li>
<li id="navi04"><a href="#">>> Contact</a></li>
</ul>
<ul id="info">
<li><a href="#">個人情報の取扱いについて</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<address>Copyright c 2012 WebDesign</address>
</div>
</body>
</html>