Menú desplegable me oculta los submenus por el :hover
Publicado por Ayuda con código CSS (1 intervención) el 01/05/2020 19:24:33
Buenos días, les comparto el siguiente link de mi página web, si reducen la pantalla a más de 900px, el menú se oculta en un botón, si hacemos click en el botón el menú saldrá, pero tengo un inconveniente al navegar en el menú, me oculta los submenús, agradecería su ayuda.
Este inconveniente creo que hace parte del problema con los :hover en el media screen
Link pagina web: https://merciipro.000webhostapp.com/#
Comparto el código CCS y Html
CSS:
HTML:
Este inconveniente creo que hace parte del problema con los :hover en el media screen
Link pagina web: https://merciipro.000webhostapp.com/#
Comparto el código CCS y 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
63
64
/*Media Screen*/@media screen and (max-width: 980px){
body{padding-top: 80px;
}::-webkit-scrollbar{
display: none; }.menu_bar{
display: block;width: 100%;;
position: fixed; top: 0;background: #000000;
left: 0; }.header{
padding-top: 60px;
}.logo{
text-align: center;
}.menu_bar .bt-menu{
display: block; padding: 20px; color: white; overflow: hidden;font-size: 25px;
font-weight: bold;
text-decoration: none;
}.menu_bar span{
float: left;font-size: 40px;
}.header .navegacion{
width: 40%;
height: calc(100% - 80px);
position: fixed;right:100%;
margin: 0; overflow: scroll;text-align: left;
}.header .navegacion ul li{
display: block;border-bottom: 1px solid rgba(255,255,255,.5);
}.header .navegacion ul li a{
display: block; }.header .navegacion ul li .submenu{
width: 100%;
position: relative; display: none; }.header .navegacion ul li .submenu li a{
margin-left: 20px;
}.header .navegacion ul li .caret{
float: right; }}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
<header class="header">
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span><h1>Menú</h1></a>
</div>
<nav class="navegacion">
<ul class="menu">
<li><a href="#" class="logo"><h1>TICKU</h1></a></li>
<li><a href="#"><span class="icon-home"></span> Home</a></li>
<li class="menu2"><a href="#"><span class="icon-calendar"></span> Eventos <span class="caret icon-chevron-down"></span></a>
<ul class="submenu">
<li><a href="#">Culturales</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Teatro</a></li>
</ul>
</li>
<li class="menu2"><a href="#"><span class="icon-airplane"></span> Viajes <span class="caret icon-chevron-down"></span></a>
<ul class="submenu">
<li><a href="#">Aereos</a></li>
<li><a href="#">Terrestres</a></li>
</ul>
</li>
<li class="menu2"><a href="#"><span class="icon-video-camera"></span> Cine <span class="caret icon-chevron-down"></span></a>
<ul class="submenu">
<li><a href="#">Estrenos</a></li>
<li><a href="#">Tikets</a></li>
</ul>
</li>
<li><a href="#"><span class="icon-phone"></span> Contactenos</a></li>
</ul>
</nav>
</header>
Valora esta pregunta
0