Menu desplegable

[alvaro_trewhela]

Avance en algo, copie un menú en internet:

Código CSS:

ul, ol {
list-style:none;
}
            
.nav{
padding:0px;
margin:0px;
}
            
.nav > li {
float:left;
}
            
.nav li a {
color:#fff;
font-size:14px;
text-decoration:none;
margin:22px 15px 0px 0px;
display:block;
}
            
.nav li ul {
display:none;
position:absolute;
}
            
.nav li:hover > ul {
display:block;
margin:-1px 0px 0px -3px;
}
            
.nav li ul li {
position:relative;
}
 

Y el menu:

Código HTML:

<ul class="nav">
						<li><a href="#">Mujer</a>
						<ul>
								<li><table style="background-image:url('images/trans.png');"><tr><td style="color:white;">HOLA</td></tr></table></li>
							</ul>
						</li>
						
						<li><a href="#">Hombre</a>
							<ul>
								<li><table style="background-image:url('images/trans.png');"><tr><td style="color:white;">HOLA<br/>HOLA<br/>HOLA<br/>HOLA<br/></td></tr></table></li>
							</ul>
						</li>
					</ul> 

Pero cuando paso el mouse hacía la tabla este se esconde. ¿Qué debo hacer?