ドロップダウンのサブメニューを画面の左右いっぱい

質問

メインのナビゲーションでマウスを重ねた時に下にサブメニューを表示させるのですが、画面左右いっぱいにバックカラーを入れたいのですが、できません。
バックカラーはＡＡＡの幅になります。
ul.nav li ul.sub のwidthに数値を入れれば右側に広がりますが左右いっぱいにはなりません。
マウスを“ＡＡＡ”に重ねても文字の色は変化しません。
jQueryは初めてで、マニュアル本を見ながらの作成の為、悪戦苦闘です。
よろしくお願いします。
【ｈｔｍｌ】
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$("ul.sub").hide();
$("ul.nav li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast");
},
function(){
$("ul",this).slideUp("fast");
});
});
</script>
</head>
<div class="wrapper">
<nav>
<ul class="nav">
<li><a href="#">AAA</a></li>
<ul class="sub">
<li><a href="#">AAA-1</a></li>
　　　　<li><a href="#">AAA-2</a></li>
　　　　 <li><a href="#">AAA-3</a></li>
</ul>
<li><a href="#">BBB</a></li>
<li><a href="#">CCC</a></li>
<li><a href="#">DDD</a></li>
<li><a href="#">EEE</a></li>
</ul>
</nav>
</div>

【ＣＳＳ】
.wrapper {
position: relative;
width: 960px;
margin-left:auto;
margin-right:auto;
}
ul.nav {
width: 960px; margin: 0;
margin-left:auto;
margin-right:auto;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 0;

ul.nav li {
border-left: 1px solid #ccc;
float: left;
position:relative
}

ul.nav li:first-child {
border: 0;
padding-left:150px;
}

ul.nav li a{
display: block;
padding:10px 30px;
color: #333;
text-decoration: none; }

ul.nav li a:hovre{
color:#009F00;
}

ul.nav:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
ul.nav li ul.sub {
position: absolute;
top:30px;
width:100％;
background-color:#808080;
}

ul.nav li ul.sub li{
float:left;
}

ul.nav li ul.sub:after {
height:0;
content:".";
display:block;
clear:both;
}

回答No.1

noname#217950

答えやすくなりますので、よかったら教えて下さい。

・一番下の画像の様にしたいという事ですか？
・どこかのサイトから引っ張ったソースが上手く動かないのですか？それとも、全てご自分でチャレンジ中なのですか？

補足

ありがとうございます。
下の画像の様にしたいという事です。
http://www.cj-fund.co.jp/
のような感じです。
マニュアル本を見ながらすべて自分でチャレンジ中です。
よろしくお願いします。