Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ayuda menu desplegable CSS

CSS - Ayuda menu desplegable CSS

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda menu desplegable CSS

Publicado por Adrian (3 intervenciones) el 10/01/2021 21:52:59
Buenas tardes,

Hace poco que he comenzado a formarme poco a poco en este mundo del diseño web y me gusta lo que voy haciendo. Pero ahora mismo necesito ayuda ya que no me sale el menu despegable. Se que mi fallo o creo que esta en los selectores hijos. Adjunto el codigo y haber si alguien me puede ayudar. Es un proyecto que quiero comenzar de un propio blog pero primero hay que aprender bien desde abajo.

Screenshot-from-2021-01-10-21-38-34
Screenshot-from-2021-01-10-21-38-46

También si alguien pudiera darme una idea sobre libros o pdf para poder leer le estaría muy agradecido.

Un saludo Hackermens :)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 160
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda menu desplegable CSS

Publicado por Lopez (38 intervenciones) el 19/01/2021 23:14:20
Hola de vuelta Adrian,

Hice unos ajustes sobre tu CSS.
Seguro tu lo dejaras mas bonito, pero puedes ver que el evento :hover ya está.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
ul{
    list-style: none;
    display: inline-block;
}
li {
  display: none;
  color: white;
  padding: 10px 10px 10px 10px;
  margin: 1px solid black;
  box-sizing: border-box;
}
li a{
  display: block;
    color: white;
    text-decoration: none;
    display: block;
    visibility: inherit;
 
}
.menu{
  text-decoration: none;
}
.menu ul{
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
.menu li
{
    display: block;
    position: relative;
    float: left;
}
.menu li ul
{
    display: none;
}
.menu > li a{
    list-style-type: none;
  }
 
.menu li:hover ul {
  position: absolute;
  display: block;
  transition: 3s;
  visibility: visible;
}

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 11
Ha aumentado su posición en 5 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda menu desplegable CSS

Publicado por Adrian (3 intervenciones) el 20/01/2021 13:43:08
Gracias me va perfecto. Pero necesito resolver una duda y es como funciona los pseudo elementos para que ese :hover realiza su función.
Me refiero en este trozo de aqui:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.menu ul{
 
  position: relative;
 
  display: inline-block;
 
  box-sizing: border-box;
 
}
 
.menu li
 
{
 
    display: block;
 
    position: relative;
 
    float: left;
 
}
 
.menu li ul
 
{
 
    display: none;
 
}
 
.menu > li a{
 
    list-style-type: none;
 
  }
 
 
 
.menu li:hover ul {
 
  position: absolute;
 
  display: block;
 
  transition: 3s;
 
  visibility: visible;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar