CSS - problemas al posicionar un menu desplegable

   
Vista:

problemas al posicionar un menu desplegable

Publicado por jose maria josepreyes75@hotmail.com (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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

problemas al posicionar un menu desplegable

Publicado por jose maria josepreyes75@hotmail.com (16 intervenciones) el 17/10/2014 19:32:38
hola, modifique un poco el codigo, ahora lo pude meter en en div, lo que quiero sige siendo igual pero dentro del div, osea se, poder ponerlo en la posicion que quiera arriba o abajo, y de izquierda a derecha
¿me explique?
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="./estilos/menudesplegable3.css">
</head>
<body style="
font-family: arial;
font-size: 12px;
">
<!-- CODIGO DESPLEGABLE-->
<div style ="
position: relative;
left: 50px;
top: 50px;
height: 150px;
width: 350px;  
background-color:#FF0000;
">
<!-- CODIGO DESPLEGABLE-->
<div id="desplegable2" class="menu">
<ul>
<!-- PRIMERA COLUMNA-->
<li>
<a href=""title="">
MENU 1
</a>
              <ul>
              <li>
              <a href="" title="">
              OPCION 1
              </a>
              </li>
 
              <li>
              <a href="" title="">
              OPCION 2
              </a>
              </li>
 
              <li>
              <a href="" title="">
              OPCION 3
              </a>
              </li>
</ul>
</li>
 
<!-- FIN PRIMERA COLUMNA-->
 
<!-- SEGUNDA COLUMNA-->
<li>
<a href=""title="">
MENU 2
</a>
              <ul>
              <li>
              <a href="" title="">
              OPCION 1
              </a>
              </li>
 
              <li>
              <a href="" title="">
              OPCION 2
              </a>
              </li>
 
              <li>
              <a href="" title="">
              OPCION 3
              </a>
              </li>
</ul>
</li>
<!-- FIN SEGUNDA COLUMNA-->
 
 
</ul>
<!-- FINAL DIV desplegable2-->
<!-- FINAL DIV desplegable1-->
</div>
<!-- FIN CODIGO DESPLEGABLE-->
</div>
</body>
</html>
 
codigo css:
 
.menu li{
float:left; /* cambia menu de persiana a lineal */
width:130px; /* ajusta el ancho de la columna */
}
.menu li a{
/* coloca de color blanco las separaciones de las columnas */
border-right:#FFFFFF solid 1px;
background:#ad59b9;
/* 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:#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{
padding:0px 10px 0px 15px;
text-align:left;
}
 
.menu li ul a:hover,.menu li ul li:hover a{
background:#9cd14b;
color:#ffffff;
}


gracias
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