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

CSS - Lista con menu desplegable

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de ASTRID

Lista con menu desplegable

Publicado por ASTRID (2 intervenciones) el 24/11/2015 17:43:28
Hola me gustaria saber Si alguien me puede ayudar a como hacer que esto se vea como una lista con temas y que al hacer hover se desplieguen los botones que me llevan a otras paginas. esto fue lo que pude hacer pero no era lo que queria exactamente jejej. Y estoy empezando en esto de la programacion y del css y no conozco casi de la parte de las animaciones, solo me fijo haciendo algunas cosas de tutoriales :S
queria que se viera mas o menos asi :
lol


y asi me quedo
http://matematicaunexpo.uphero.com/estilos/html/listaejercicios.html

y aqui esta el archivo
el archivo es listaejercicios.thml y el css es estilosejemplo.css les agradezco mucho si me ayudan :)
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
sin imagen de perfil

Lista con menu desplegable

Publicado por lorena elideth (2 intervenciones) el 27/05/2016 19:50:13
Hola tal vez te sirva este código.
Aunqe tambien ya puedes descargar plantillas.
Saludos


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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
	<head>
		<title>Menu Desplegable</title>
		<style type="text/css">
 
			* {
				margin:0px;
				padding:0px;
			}
 
			#header {

				margin:auto;
				width:500px;
				font-family:Arial, Helvetica, sans-serif;
			}
 
			ul, ol {
				list-style:none;
			}
 
			.nav > li {
				float:left;
			}
 
			.nav li a {
				background-color:#000;

				color:#fff;

				text-decoration:none;
				padding:10px 12px;
				display:block;
			}
 
			.nav li a:hover {
				background-color:#434343;

			}
 
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}
 
			.nav li:hover > ul {
				display:block;
			}
 
			.nav li ul li {
				position:relative;
			}
 
			.nav li ul li ul {
				right:-140px;
				top:0px;
			}
 
		</style>
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				<li><a href="">Inicio</a></li>
				<li><a href="">Servicios</a>
					<ul>
						<li><a href="">Submenu1</a></li>
						<li><a href="">Submenu2</a></li>
						<li><a href="">Submenu3</a></li>
						<li><a href="">Submenu4</a>
							<ul>
								<li><a href="">Submenu1</a></li>
								<li><a href="">Submenu2</a></li>
								<li><a href="">Submenu3</a></li>
								<li><a href="">Submenu4</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="">Acerca de</a>
					<ul>
						<li><a href="">Submenu1</a></li>
						<li><a href="">Submenu2</a></li>
						<li><a href="">Submenu3</a></li>
						<li><a href="">Submenu4</a></li>
					</ul>
				</li>
				<li><a href="">Contacto</a></li>
			</ul>
		</div>
	</body>
</html>
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