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" />Discussão (2)
Carregando comentários...