Problema con menu desplegable
Publicado por johan (1 intervención) el 23/01/2017 20:01:34
Hola buen dia!! estoy teniendo un inconveniente con un menu desplagable que hice, en realidad con el slidershow que esta debajo de el, porque en el momento que despliego el menu, se mueve el slider, estoy colocando el contenido del sliders dentro de una caja y dandole una posicion absolute, pero no logro que se quede donde quiero, agradeceria si alguien me puede dar una ayuda!
Gracias de antemano y dejo el codigo html t css mas abajo.
HTML
CSS
Gracias de antemano y dejo el codigo html t css mas abajo.
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Home-RAW</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<section id="contenedor">
<div id="logo">
<div class="social">
<img src="imag/twitter.png" alt="logo twitter" />
<img src="imag/facebook.png" alt="logo facebook" />
<img src="imag/instagram.png" alt="logo instagram" />
</div>
<img id="raw" src="imag/logof.png" alt="logo" />
</div>
<div id="menu">
<nav class="principal">
<ul id="m1">
<li ><a href="#">Novedades</a>
<ul class="submenu1">
<li class="submenu1"><a href="#">Nuevos equipos</a></li>
<li class="submenu1"><a href="#">Series inspiradoras</a></li>
</ul>
</li>
</ul>
<ul id="m2">
<li><a href="#">Tecnicas</a>
<ul class="submenu2">
<li class="submenu2"><a href="#">Lighpaiting</a></li>
<li class="submenu2"><a href="#">Fotoperiodismo</a></li>
<li class="submenu2"><a href="#">Retratos</a></li>
<li class="submenu2"><a href="#">Paisajismo</a></li>
</ul>
</li>
</ul>
<ul id="m3">
<li><a href="#">Tutoriales </a>
<ul class="submenu3">
<li class="submenu3"><a href="#">Elige tu camara</a></li>
<li class="submenu3"><a href="#">Tips de fotografia</a></li>
<li class="submenu3"><a href="#">Las 10 mejores referencias</a></li>
</ul>
</li>
</ul>
<ul id="m4">
<li><a href="#">Sofware</a>
<ul class="submenu4">
<li class="submenu4"><a href="#">Magic Lantern</a></li>
</ul>
</li>
</ul>
<ul id="m5">
<li><a href="#">Concursos</a></li>
</ul>
<ul id="m6">
<li><a href="#">Iluminacion</a>
<ul class="submenu6">
<li class="submenu6"><a href="#">Teoria</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Suscribete</a></li>
</ul>
</nav>
</div>
<div class="slider">
<section class="imagenes">
<p>Día de la ira, aquel día
Disolverá los siglos en cenizas, Así lo profetizaron David y la Sibila!Dies iræ, dies illa,
Solvet sæclum in favilla,Teste David cum Sibylla</p>
<img src="imag/foto01.jpg" alt="" />
</section>
<section class="imagenes">
<p>Día de la ira, aquel día
Disolverá los siglos en cenizas, Así lo profetizaron David y la Sibila!Dies iræ, dies illa,
Solvet sæclum in favilla,Teste David cum Sibylla</p>
<img src="imag/foto02.jpg" alt="" />
</section>
<section class="imagenes">
<p>Día de la ira, aquel día
Disolverá los siglos en cenizas, Así lo profetizaron David y la Sibila!Dies iræ, dies illa,
Solvet sæclum in favilla,Teste David cum Sibylla</p>
<img src="imag/foto03.jpg" alt="" />
</section>
</div>
</section>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.cycle.js"></script>
<script src="js/java.js"></script>
</html>
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
59
60
61
62
*{color:white;
padding:0px;margin:0px}body{background-color:white;}
#contenedor{background-color:black;
width:1024px; margin:auto; }.social{float:right;
margin-right:3%;
margin-top:2%;
margin-bottom:0%;
}#menu{width:90%;
margin-left:auto;
}nav ul{color:white;
list-style-type:none;
float:left;margin:1%;
width:11%;
padding-right:5px;
}a{text-decoration:none;
color:white;}
.submenu1 li,.submenu2 li,.submenu3 li,.submenu4 li,.submenu5 li,.submenu6 li {
display:none;margin-top:14px;
text-align:auto;
width:100px;}nav ul li { border-right:1px yellow solid;
}.slider{width:611px;
height:411px; overflow:hidden; margin:0 auto;margin-top:5%;
}.imagenes{width:611px;
height:411px;position:relative; }
.imagenes p{background:rgba(0, 0, 0, 0.8);
margin-top:48%;
padding:5px; position:absolute;width:35%;
}Valora esta pregunta
0