【CSS14】(修正)

以下の画像と同じように表示させるCSSを記述しなさい
擬似クラスで指定


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
<!--


div.nav ul{	
	list-style-type	:none;
	margin			:10px 0 0 0 ;
	padding			:0;
	width			:12em;
}

div.nav li{	
	background-color:#292;
	margin	:1px;

	font-weight		:bold;
	letter-spacing	:0.2em;
	text-align		:center;
	text-decoration	:none;
	line-height		:2em;
}

div.nav a{	
	color			:#fff;
	display			:block;
	width			:12em;
	text-decoration	:none;
}

div.nav a:hover{
	color			:#fff;
	background-color:orange;
}


-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
</ul>
</div>
</body>
</html>