Submenu com o width ocupando 100% da tela

Olá, estou tentando fazer um menu horizontal no qual seus submenus ocupassem 100% do tamanho da tela como no próprio site do imasters.

Por enquanto meu menu se encontra da seguinte maneira:

HTML

Spoiler

 <nav>

     <ul class="menu">

         <li><a href="#">Homens</a>

             <ul>

                 <li><a href="#">Agasalhos</a></li>

                 <li><a href="#">Calças</a></li>

                 <li><a href="#">Camisetas</a></li>

             </ul>

         </li>

         <li><a href="#">Mulheres</a>

             <ul>

                 <li><a href="#">Agasalhos</a></li>

                 <li><a href="#">Calças</a></li>

                 <li><a href="#">Camisetas</a></li>

             </ul>

         </li>

         <li><a href="#">Crianças</a>

             <ul>

                 <li><a href="#">Agasalhos</a></li>

                 <li><a href="#">Calças</a></li>

                 <li><a href="#">Camisetas</a></li>

             </ul>

         </li>

         <li><a href="#">Ofertas</a>

             <ul>

                 <li><a href="#">Agasalhos</a></li>

                 <li><a href="#">Calças</a></li>

                 <li><a href="#">Camisetas</a></li>

             </ul>

         </li>

     </ul>

 </nav>

 /applications/core/interface/imageproxy/imageproxy.php?img=http://i67.tinypic.com/ofpnxu.jpg&key=32656df87f7ec56267b796c2b414b09e930ca44cb478cd1f06a2143b699c99d6" class="ipsImage" alt="ofpnxu.jpg" />

CSS

Spoiler

 .menu{

 position: relative;

 margin: -3px auto;

 width: 450px;

 background: black;

 color: white;

 list-style:none;

 }

 .menu li{

 position:relative; 

 float:left; 

 }

 .menu li a{font-family:"Humnst777 Blk BT";    color:white; text-decoration:none; padding:5px 20px; display:block;}

 .menu li a:hover{

 color:black;

 background: white;

 }

 .menu ul li a{font-family:"Humnst777 Blk BT";    color:black; text-decoration:none; padding:5px 20px; display:inline-block;}

 .menu ul li a:hover{

 color:blue;

 }

 .menu li  ul{

 position:absolute; 

 top:25px; 

 left:0;

 background-color:#fff; 

 display:none;

 height: 300px;

 width: 100%;

 }    

 .menu li:hover ul, .menu li.over ul{

     display:block;

 }

 .menu li ul li{

 display:block; 

 width: 200px;

 }

	**Referência**

 Spoiler

 /applications/core/interface/imageproxy/imageproxy.php?img=http://i64.tinypic.com/117vhfo.png&key=2e9a7eaa39826acca2620b5015dd7378a47340d3099606d7ca167dd41ae1a2b4" class="ipsImage" alt="117vhfo.png" />