problemas al posicionar un menu desplegable
Publicado por jose maria (16 intervenciones) el 16/10/2014 18:18:04
hola, tengo un codigo de un menu desplegable, consta de un codigo html y otro css:
codigo html:
codigo css:
todo va bien, pero me gustaría hacer dos cosas que no consigo.....
una ajustar el menú al filo izquierdo de la pantalla y lo otro es poder poner este menú en cualquier parte de la pantalla....
intente meterlo todo en otro div, pero como que no lo conseguía.......
gracias
codigo html:
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
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="./estilos/menudesplegable2.css">
</head>
<body style="
font-family: arial;
font-size: 12px;
">
<!-- CODIGO DESPLEGABLE--><div id="desplegable2" class="menu">
<ul>
<!-- PRIMERA COLUMNA--><li>
<a href=""title="">
GENERAL 1
</a>
<ul>
<li>
<a href=""title="">
OPCION
</a>
</li>
<li>
<a href=""title="">
OPCION
</a>
</li>
<li>
<a href=""title="">
OPCION
</a>
</li>
</ul>
</li>
<!-- FIN PRIMERA COLUMNA--><!-- SEGUNDA COLUMNA--><li>
<a href=""title="">
GENERAL 2
</a>
<ul>
<li>
<a href=""title="">
OPCION
</a>
</li>
<li>
<a href=""title="">
OPCION
</a>
</li>
<li>
<a href=""title="">
OPCION
</a>
</li>
</ul>
</li>
<!-- FIN SEGUNDA COLUMNA--><!-- TERCERA COLUMNA--><li>
<a href=""title="">
GENERAL 3
</a>
<ul>
<li>
<a href=""title="">
OPCION
</a>
</li>
<li>
<a href=""title="">
OPCION
</a>
</li>
<li>
<a href=""title="">
OPCION
</a>
</li>
</ul>
</li>
<!-- FIN TERCERA COLUMNA--></ul>
<!-- FINAL DIV desplegable2--></div>
<!-- FIN CODIGO DESPLEGABLE--></body>
</html>
codigo css:
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
.menu li{
float:left; /* cambia menu de persiana a lineal */
width:140px; /* ajusta el ancho de la columna */
}.menu li a{
/* coloca de color blanco las separaciones de las columnas */border-right:#FFFFFF solid 1px;
background:url("../imagenes/base/navbg.gif") bottom right repeat;
/* pone color a la cabezera del menu */color:#ffffff;
display:block;font-weight:normal;
line-height:25px;
text-align:center;
text-decoration:none;}
/* pone la linea verde al seleccionar */.menu li a:hover,.menu ul li:hover a{
background:#9cd14b;
}.menu li ul{
background: url("../imagenes/base/navbg.gif") bottom right repeat;
background:#ad59b9;
display:none;padding:0px;/* ajusta el ancho de las opciones del desplegable */width:130px;z-index:200;
}/* elimina las opciones persianas del menu */.menu li:hover ul{
display:block;}/* al desplegar la persiana te pone las opciones de izquierda a derecha */.menu li li{
display:block;float:none;width:auto;}
/* si se quita la persiana la pone de verde */.menu li:hover li a{
background:none;}/* si se quita te centra toda la persiana al ancho de la opcion mas larga */.menu li ul a{
display:block;height:25px;font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;text-align:left;
}.menu li ul a:hover,.menu li ul li:hover a{
background:#9cd14b;
color:#ffffff;
text-decoration:none;
}.menu p{
clear:left;}todo va bien, pero me gustaría hacer dos cosas que no consigo.....
una ajustar el menú al filo izquierdo de la pantalla y lo otro es poder poner este menú en cualquier parte de la pantalla....
intente meterlo todo en otro div, pero como que no lo conseguía.......
gracias
Valora esta pregunta
0