SoloCodigo
Programación Web y Scripting => HTML => Mensaje iniciado por: $francisco en Sábado 4 de Mayo de 2013, 14:02
-
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=NIrdQFgqlsk (http://www.youtube.com/watch?v=NIrdQFgqlsk)
codigo 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.
-
creo que si pones el codigo de las listas así seguro se pondrá como en el vídeo
<li>Inicio</li>
<li>Economia
<ul class="submenu">
<li>Empresa</li>
<li>Mercado</li>
<li>Bolsa</li>
<li>Banca</li>
</ul>
</li>
<li>Cultura
<ul class="submenu">
<li>Novela</li>
<li>Comic</li>
<li>Series</li>
<li>Cine</li>
</ul>
</li>
<li>Ciencia
<ul class="submenu">
<li>Natural</li>
<li>Cosmos</li>
<li>Tierra</li>
<li>Tenis</li>
</ul>
</li>
<li>deportes
<ul class="submenu">
<li>Futbol</li>
<li>Motor</li>
<li>Basket</li>
</ul>
</li>
y en el CSS en el menu>li te falto poner que la posicion sea relativa a la posición de dicho menu
ul{
list-style-type:none;
padding:0;
}
#menu{
width:200px;
}
#menu>li{
background-color:#4dcdc8;
border: 1px outset #4bcdc8;
padding:5px;
position: relative;
}
.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;
}