menu desplegable oculto problema z index
Publicado por hungry (1 intervención) el 27/08/2018 16:08:44
Hola a todos, soy nuevo en el desarrollo web y me ha surgido un problema.
Tengo un menu que al desplegarse se oculta tras un parallax y no se como usar el z index para resolverlo pues he probado varias formas y nada :(
A todo el mundo se le resuelve con el z index y a mi nada por lo que deduzco que el fallo esta en mi codigo en algo que no conozco y no puedo encontrar.
Si pudieseis ayudarme lo agradecería mucho
El codigo CSS es el siguiente:
Tengo un menu que al desplegarse se oculta tras un parallax y no se como usar el z index para resolverlo pues he probado varias formas y nada :(
A todo el mundo se le resuelve con el z index y a mi nada por lo que deduzco que el fallo esta en mi codigo en algo que no conozco y no puedo encontrar.
Si pudieseis ayudarme lo agradecería mucho
El codigo CSS es el siguiente:
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
@charset "utf-8";/* CSS Document *//* ESTILOS GENERALES */p, a, li, h1, h2, h3, h4, h5, h6 {
font-family: 'ABeeZee', sans-serif;
}* {
margin:0px; padding:0px;}/* CABECERA */.cabecera{
width: 100%;
height:150px; overflow: hidden;background-color: #FFFFFF;
position: relative;z-index: 999;
}/*LOGO*/.logo{
width: 30%;
overflow: hidden; float: left;}.logo img{
width:15%;
margin: 15px 20px; overflow: hidden;}/*MENU DE NAVEGACION*/#header {
width:60%;
font-family: 'ABeeZee', sans-serif;
font-size: 15px;
float: left;padding-top: 1.5%;
padding-left: 15%;
}/*En general, listas ordenadas y desordenadas no tienen estilo de lista (los puntitos que aparecen a la izda)*/ul, ol {
list-style:none;
}li { position: absolute;z-index: 999;
}/*Sólo la lista hija directa del nav debe flotar a la izda, el resto de submenus deben aparecer en columna*/.nav > li {
float:left;}.nav li a {
background-color:#FFFFFF;
color:#000;
text-decoration:none;
padding:10px 12px; display:block;}/*Color que sale en los submenus cuando pasas el ratón por encima*/.nav li a:hover {
background-color:#C7C7C7;
}.nav li ul {
/*display none para que cuando no este el cursor sobre el desaparezcan*/ display:none; /*position absolute para que al no verse no se les "guarde" el espacio como pasaría con relative*/ position:absolute; /*antes estaba en 120px*/min-width:140px;
z-index: 999;
}/*Cuando el cursor pase por encima de un elemento lista, se despliega solo la lista hija directa del elemento*/.nav li:hover > ul {
display:block;}.nav li ul li {
position:relative;}.nav li ul li ul {
right: -150px;
top:0px;}/******SOCIAL*******/.social {
width: 7%;
overflow: hidden; float: left;margin-top: 1.5%
}.social img{
width: 30px; float: left; overflow: hidden;padding-top: 2%;
margin-right: 1%;
position: relative;margin-right: 5%;
}/*CONTENIDO*//* PARALLAX */.parallax {
width: 100%;
height: 300px; overflow: hidden;background-image:url(img/pintura1.jpg);
background-attachment: fixed;
background-size: cover;
display: block; padding: 100px;padding-left: 400px;
padding-right: 400px;
position: relative;z-index: -1;
}.parallax h3{
text-align: center;
background-color: rgba(255,255,255, 0.6);
padding: 15px;color: #333;
font-size: 36px;
}Valora esta pregunta
0
