Muy buenas, estoy bastante estancado, porque quiero hacer un menú desplegable vertical pero el problema que no se forma como debería, tomé como referencia un video y seguí los pasos, aquí os dejo el video y mi codigo:
video:
http://www.youtube.com/watch?v=NIrdQFgqlskcodigo html:
<html>
<head>
<title>ejemplo</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li>Inicio</li>
<li>Economia</li>
<ul class="submenu">
<li>Empresa</li>
<li>Mercado</li>
<li>Bolsa</li>
<li>Banca</li>
</ul>
<li>Cultura</li>
<ul class="submenu">
<li>Novela</li>
<li>Comic</li>
<li>Series</li>
<li>Cine</li>
</ul>
<li>Ciencia</li>
<ul class="submenu">
<li>Natural</li>
<li>Cosmos</li>
<li>Tierra</li>
<li>Tenis</li>
</ul>
<li>deportes</li>
<ul class="submenu">
<li>Futbol</li>
<li>Motor</li>
<li>Basket</li>
</ul>
</ul>
</body>
</html>codigo css:
ul{
list-style-type:none;
padding:0;
}
#menu{
width:200px;
}
#menu>li{
background-color:#4dcdc8;
border: 1px outset #4bcdc8;
padding:5px;
}
.submenu{
top:0;
left:199px;
position:absolute;
display:none;
}
.submenu>li{
background-color:#4dcdc8;
border: 1px outset #4bcdc8;
width:160px;
padding:2px;
}
#menu li:hover{
color:white;
cursor:pointer;
}
#menu li:hover ul{
display:block;
}el caso es que no se forma como dice en el vídeo, sigo todos los pasos pero nada, y la siguiente linea css no actua:
#menu li:hover ul{
display:block;
}la subclase no se queda en el elemento padre al darle la posición relativa, si me pudierais echar una mano comprobandolo vosotros lo agradecería.
gracias.
