Ayuda con menú desplegalbe CSS
Publicado por Gilbert (1 intervención) el 15/10/2014 19:57:54
Hola,
hace un tiempo me hice un menú deplegable con CSS y hoy he querido ponerle un borde y he visto que no se oculta totalmente, siempre se ve la parte inferior del submenu que se oculta, osea que cuando esta oculto se ve el borde inferior, aunque luego se muestra correctamente.
Antes no me habia dado cuenta porque el fondo del menu es del mismo color que el fondo del body y al no tener bordes no me di cuenta, aunque el error existia igualmente.
El HTML es:
El CSS es este:
hace un tiempo me hice un menú deplegable con CSS y hoy he querido ponerle un borde y he visto que no se oculta totalmente, siempre se ve la parte inferior del submenu que se oculta, osea que cuando esta oculto se ve el borde inferior, aunque luego se muestra correctamente.
Antes no me habia dado cuenta porque el fondo del menu es del mismo color que el fondo del body y al no tener bordes no me di cuenta, aunque el error existia igualmente.
El HTML es:
1
2
3
4
5
6
7
8
<nav id="acciones">
<ul><li>Un link</li>
<li>Un link<ul class="dos">
<li>1 Submenu</li>
<li>2 Submenu</li>
<li>3 Submenu</li>
</ul></li>
</ul></nav>
El CSS es este:
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
#acciones {
margin-left:20px;
float:left;position:relative;height:30px;font-family:lucida sans unicode;
font-size:16px;
font-weight:500;
color:silver;background-image: url(img/fondo.png);
}#acciones ul li{
height:20px;float:left;padding-right:26px;
list-style:none;
text-align:left;
list-style: none;
display: inline-block;
position:relative;line-height: 1;
margin-bottom: 15px;
margin-top:-10px;
font-family:lucida sans unicode;
}#acciones li ul li{
margin-left:-40px;
color:silver;border:0;list-style:none;
width:300px;padding-top:12px;
float:left;}#acciones li ul li a{
text-decoration:none;
color:#848484;
float:left;}#acciones li ul.dos{
border-left:1px solid #006600;
position:absolute;list-style:none;
width:260px;margin-left:-0px;
top:50px;font-family:lucida sans unicode;
border-bottom:1px solid #006600;
max-height:0px;
overflow:hidden;-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}#acciones li:hover ul{
max-height:400px;
}#acciones ul li ul li a:hover{
color: white;}Valora esta pregunta
0