• Jueves 28 de Marzo de 2024, 17:02

Autor Tema:  Problema con menu desplegable html y css  (Leído 2786 veces)

$francisco

  • Miembro activo
  • **
  • Mensajes: 49
  • Nacionalidad: es
    • Ver Perfil
Problema con menu desplegable html y css
« en: Sábado 4 de Mayo de 2013, 14:02 »
0
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

codigo html:


Código: [Seleccionar]
<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:

Código: [Seleccionar]
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:

Código: [Seleccionar]
#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.

herzdark

  • Miembro activo
  • **
  • Mensajes: 38
  • Nacionalidad: ar
    • Ver Perfil
Re:Problema con menu desplegable html y css
« Respuesta #1 en: Domingo 5 de Mayo de 2013, 00:51 »
0
creo que si pones el codigo de las listas así seguro se pondrá como en el vídeo

Código: [Seleccionar]
<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

Código: [Seleccionar]
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;
}