Problema com Menu em CSS

duzagatto · 1 de outubro de 2012

Olá, eu estou criando um site pra um trabalho do meu curso e estou separando ele por DIVs, beleza, criei o topo apenas com uma Imagem escrito World Games e criei um Menu com Submenu em CSS com um efeito gradiente, mas ao passar o Mouse pelo Menu Principal e ir pro Submenu dele, o submenu some, em outras palavras, não da para acessar o submenu pois ao tentar fazer o mesmo ele some.

Acho que eu já descobri o que houve, é um problema com o Height, mas se eu aumentar o Height o menu já vai sofrer alterações visiveis quando eu não estiver com o mouse sobre o submenu, não sei vocês entenderam a minha explicação mas vou deixar o código e vejam o que vocês podem fazer por mim.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>World Games - O Seu portal de games</title>
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
</head>

<body>
<div id="topo"><img src="topo.jpg" width="1000" height="300" /></div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artigos</a></li>
<li><a href="#">Galeria</a>
<ul>
<li><a href="#">Imagens</a></li>
<li><a href="#">Videos</a></li>
</ul>
</li>
<li><a href="#">Lançamentos</a>
<ul>
<li><a href="#">Nintendo Wii</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Playstation 3</a></li>
<li><a href="#">XBOX 360</a></li>
</ul>
</li>
<li><a href="#">Produtos</a>
<ul>
<li><a href="#">Acessórios</a></li>
<li><a href="#">Consoles</a></li>
<li><a href="#">Controles</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div id="corpo"></div>
<div id="banner">
<div align="center">Patrocinado por:</div>
<br />
<img src="gaming-ubisoft-logo.png" width="200" height="200" /><br />
<img src="microcamp.png" width="200" height="200" /><br />
<img src="Microsoft_Game_Studios-logo-5D0C0593FB-seeklogo.com_.gif" width="200" height="200" /><br />
</div>
<div id="rodape">World Games © (2012-presente) - Todos os direitos reservados
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Código CSS:

position:0 auto;
width:1000px;
height:300px;
z-index:1;
background-color:#CCC;
}

#menu{
width:1000px;
height:40px;
background:-moz-linear-gradient(top, #000, #484848);
background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#484848));
border:1px solid #999;
}

#menu ul{
list-style-type:none;
float:left;
width:100%;
height:100%;
}

#menu ul li{
float:left;
position:relative;
top:-15px;
left:-40px;
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0 10px;
border-right:1px solid #333;
border-left:1px solid #999;
line-height:40px;
}

#menu ul li:hover{
background:-moz-linear-gradient(top, #333, #000,);
background:-webkit-gradient(linear, left top, left bottom, from(#6A6A6A), to(#000));
}

#menu ul li:hover ul{
left:0px;
}

#menu ul li a{
display:block;
text-decoration:none;
color:#E2E2E2;
}

#menu ul li ul{
display:block;
position:absolute;
left:-999em;
top:55px;
width:200px;
width:100%;
height:100%;
border:1px solid #999;
border-top:none;
}

#menu ul li ul li{
width:200px;
border-right:none;
border-left:none;
background:-moz-linear-gradient(top, #000, #484848);
background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#484848));
border-bottom:1px solid #999;
border-top:1px solid #999;
}

#corpo {
position:relative;
width:1000px;
height:1000px;
z-index:3;
}
#banner {
position:absolute;
left:800px;
top:500px;
width:200px;
height:800px;
z-index:4;
background-color:#fff;
border-left:1px solid #000;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#rodape {
position:relative;
width:1000px;
height:100px;
z-index:5;
background-color:#ccc;
border:2px solid #999;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666;
text-align:center;
}
#topo {