Dispongo de un menú en el cual tengo varias etiquetas, dos de ellas desplegables (infantil, se despliega correctamente) y un icono de “bars” que a su vez debe contener dos elementos en el desplegable (colegios y empresas). Es en éste último donde hay un error. Si paso el ratón por encima del botón/icono “bars” se me descuadran los elementos que le siguen (acceso clientes, facebook, home, whatsapp).
¿A qué se debe? Os dejo el código HTML (reducido a esa parte) y CSS para que os lo podáis entender.
/* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ /* Created on : 08-oct-2015, 11:29:25 Author : WEBMASTER, INGESIST */ /* Style the Image Used to Trigger the Modal */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Pathway+Gothic+One'); *{ margin: 0; padding: 0; } body{ font-family: 'Open Sans', sans-serif; letter-spacing: normal; } .header{ background:transparent; } .con-borde{ border-bottom: #555 solid medium; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Pathway Gothic One', sans-serif; display: block; font-weight: 400; } figcaption>h2 { font-weight: 400; font-size: 28px; text-transform: uppercase; } /* +++++++++++ NAVBAR SUPERIOR +++++++++++ */ .navbar-sup { background: #0095a6; height: 50px; z-index: 3000; font-family: 'Pathway Gothic One', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 22px; margin:0px; padding:0px; } @media (min-width:1000px)and (max-width:1200px){ .navbar-sup { font-size: 20px; } } #owl{ top: 50px; } /* --------- brand ------------ */ .navbar-sup .navbar-brand{ color: #F3F2F0; background: #333; margin-top: 10px; margin-bottom: -5px; } .navbar-sup .navbar-brand:hover, .navbar-sup .navbar-brand:focus { color: #5e5e5e; } .navbar-sup .navbar-brand .fa{ line-height: 0.7; } /* ---------- menu ---------- */ .navbar-sup .navbar-nav > li > a { color: #fff ; } .navbar-sup .navbar-nav > li > a:hover, .navbar-sup .navbar-nav > li > a:focus { color:#333333; background-color: transparent; } @media(max-width:1000px){ .navbar-sup .navbar-nav { color: #fff ; background: rgba(0,149,166,0.8); } .navbar-sup .navbar-nav > li > a:hover, .navbar-sup .navbar-nav > li > a:focus { color:#333333; background: #0095a6; } .navbar-sup .navbar-nav{ margin-top:0px; margin-bottom:0px; } } /* ------- toggle --------- */ .navbar-sup .navbar-toggle { border-color: #ddd; } .navbar-sup .navbar-toggle:hover, .navbar-sup .navbar-toggle:focus { background-color: #ddd; } .navbar-sup .navbar-toggle .icon-bar { background-color: #fff; } .navbar-sup .navbar-collapse, .navbar-sup .navbar-form { border-color: #e7e7e7; } .navbar-sup .navbar-nav > .open > a, .navbar-sup .navbar-nav > .open > a:hover, .navbar-sup .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; } /* +++++++++++ OTROS ELEMENTOS DE MENÚ DE NAVEGACIÓN ++++++++++++++++ */ .navbar-sup .navbar-right{ display: block !important; } .navbar-sup .navbar-nav > li > a.acceso{ background: #333333; color: #ffffff; font-size: 22px; } .navbar-sup .navbar-nav > li > a.acceso:hover, .navbar-sup .navbar-nav > li > a.acceso:focus { color: #5e5e5e; text-decoration: none; } /* Efecto rotación */ @media(min-width:1000px ){ .navbar-sup .navbar-nav > li > a.giro, .navbar-sup .navbar-nav > li > a.giro:visited{ color: #fff; margin: auto 0px auto 5px ; } .navbar-sup .navbar-nav > li > a.giro:hover{ color:#5e5e5e; -webkit-transform: rotate(-360deg); -webkit-transition: all 0.8s ease-in-out 0s; -moz-transform: rotate(-360deg); -moz-transition: all 0.8s ease-in-out 0s; -o-transform: rotate(-360deg); -o-transition: all 0.8s ease-in-out 0s; -ms-transform: rotate(-360deg); -ms-transition: all 0.8s ease-in-out 0s; transform: rotate(-360deg); transition: all 0.8s ease-in-out 0s; } } .activo{ text-decoration: underline !important; } /* +++++++++++ FOOTER ++++++++++++++++ */ .footer{ font-size: 0.9em; background: #F2F2F2 none repeat scroll 0% 0%; border-top:1px solid #E3E3E3; padding: 15px 0px; margin: 30px 0px 0px; } .footer p{ font-size: 12px; color: #797979; font-weight: 400; line-height: 19px; } /* +++++++++++++ MAPA ++++++++++++++++ */ #map { height:220px; width: available; margin: 0; padding: 0; margin-top: 30px; } .gm-style-iw * { display: block; width: 100%; } .gm-style-iw h4, .gm-style-iw p { margin: 0; padding: 0; } .gm-style-iw a { color: #4272db; } /* +++++++++++ OTROS ++++++++++++++++ */ .imp-link{ color:#5b3a73; font-weight: 600; padding-top: 20px; font-size: 1.6em; } .imp-link a{ color:#0095a6; font-weight: 600; font-size: 110%; } .imp-link a:hover{ font-size:100%; text-decoration: none; } p span .displaynone { display:none; } /* Slider */ .fullwidth { width: 100%; margin-left: auto; margin-right: auto; max-width: available;/* initial */ } .slider { margin: 0; } .slider .slide { width: 100%; height: 100%; } .slick-prev { left: 0; background: red; } .slick-next { right: 0; background: red; } .slick-dots { bottom: 0px; margin-left: 0; /* Fixes the visible horizontal scroll bar */ } /* texto */ .wt { color: #fff; } .b{ font-weight: bolder; } .l { font-size: larger; } .arriba{ margin-top: -10px; } .margen-dcho { margin-right:10px; } .margen-izdo{ padding-left: 10%; } .separador{ height:50px; width: available; } .destacado{ text-decoration: underline; font-weight:bold; } /* ++++++++++++++ HR ++++++++++++++++++++ */ hr {border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; height:0;margin-bottom: 60px;margin-top: 80px; border-style: solid;} .decorated, .decorated-1, .decorated-2, .decorated-3, .decorated-5,.texto-extras,.texto-contacto,.texto-tambien,.texto-natacion,.texto-fitness,.texto-cumple,.texto-campus,.texto-galeria,.texto-empresas,.texto-servicios{border: 0; border-top: 1px solid #0095a6; border-bottom: 2px solid #0095a6; height:0; border-style: solid; text-align:center;} .decorated-4{border: 0; border-top: 1px solid #0095a6; border-bottom: 2px solid #0095a6; height:0; border-style: solid; text-align:left;} .decorated:after {position: relative; top: -18px; content: url(../img/iconos/pin.jpg);height: 44px;padding: 7px;} .decorated-1:after {position: relative; top: -18px; content: url(../img/iconos/nadador.png);height: 44px;padding: 7px;} .decorated-2:after {position: relative; top: -22px; content: url(../img/iconos/fitness.jpg);height: 44px;padding: 7px;} .decorated-3:after {position: relative; top: -22px; content: url(../img/iconos/fiesta.jpg);height: 44px;padding: 7px;} .decorated-4:after {position: relative; top: -22px; content: url(../img/iconos/empresa.jpg);height: 44px;padding: 7px;} .decorated-5:after {position: relative; top: -22px; content: url(../img/iconos/galeria.jpg);height: 44px;padding: 7px;} hr.texto-extras{margin-top: 0px !important;} .texto-extras:after {position: relative; top:-17px; content:"SERVICIOS ADICIONALES";font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-contacto:after {position: relative; top:-17px; content:"CONTÁCTANOS CON UN CLICK...";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-tambien:after {position: relative; top:-17px; content:"... O TAMBIÉN";font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-natacion:after {position: relative; top:-17px; content:"NATACIÓN";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-fitness:after {position: relative; top:-17px; content:"FITNESS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-cumple:after {position: relative; top:-17px; content:"CUMPLEAÑOS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-campus:after {position: relative; top:-17px; content:"CAMPUS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-empresas:after {position: relative; top:-17px; content:"EMPRESAS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-galeria:after {position: relative; top:-17px; content:"GALERÍA";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-servicios:after{position: relative; top:-17px; content:"OTROS SERVICIOS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} /* ++++++++++++++++ IMAGENES ++++++++++++++ */ .panel img{ width: 150px; } .horario{ max-width: available; } .img-effect { text-decoration: none; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; } .img-effect:hover { opacity: .7; -webkit-transform: scale(0.95,0.95); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(0.98,0.98); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; } .sombra{ box-shadow: 2px 2px 5px #999; -webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999; filter: shadow(color=#999999, direction=135, strength=2); } figure{ background: #F3F4F3; } figure img{ padding: 3px; } figcaption p{ color: #777; font-weight:500; padding-left: 10px; padding-right: 10px; } figcaption hr{border: 0; border-top: 1px solid #ddd; border-bottom: 2px solid #ddd; height:0; border-style: solid;} .servicios { padding: 0; max-height: 100px; width: 130px; } .servicios img{ height: 70px; text-align: center; } #inicio{ position: relative; top:10px; } .max-ancho{ width: 100%; height: auto; } /* ++++++++++++++ FORMULARIO +++++++++++++++ */ #contact{ padding:0; } .contact-text{ margin:45px auto; } .mail-message-area{ width:100%; padding:0 15px; } .mail-message{ width: 100%; height: 30px; background:rgba(255,255,255, 0.8) !important; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s; margin:0 auto; border-radius: 0; } .not-visible-message{ height:0px; opacity: 0; } .visible-message{ height:auto; opacity: 1; margin:25px auto 0; } /* Input Styles */ .form{ width: 100%; padding: 15px; background:#f8f8f8; border:1px solid rgba(0, 0, 0, 0.075); margin-bottom:25px; color:#727272 !important; font-size:13px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .form:hover{ border:1px solid #8BC3A3; } .form:focus{ color: white; outline: none; border:1px solid #8BC3A3; } .textarea{ height: 200px; max-height: 200px; max-width: 100%; } /* Generic Button Styles */ .button{ padding:8px 12px; background:#0A5175; display: block; width:120px; margin:10px 0 0px 0; border-radius:3px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-align:center; font-size:0.8em; box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); } .button:hover{ background:#343e93; color:white; } /* Send Button Styles */ .form-btn{ width:180px; display: block; height: auto; padding:15px; color:#fff; background:#8BC3A3; border:none; border-radius:3px; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; margin:auto; box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); } .form-btn:hover{ background:#5986a9; color: white; border:none; } .form-btn:active{ opacity: 0.9; } .enlace{ text-decoration: underline; } .semibold{ font-weight: 600; } .modal{ z-index: 4000; } .otros{ padding: 18px; font-size: 0.8em; }<!DOCTYPE html > <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="img/logos/logo-min.png"> <meta name="robots" content="index, follow" > <meta name="googlebot" content="NOODP, follow"> <!-- Favicon --> <link rel="apple-touch-icon" sizes="57x57" href="img/favicon.ico/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="img/favicon.ico/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="img/favicon.ico/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="img/favicon.ico/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="img/favicon.ico/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="img/favicon.ico/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="img/favicon.ico/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="img/favicon.ico/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="img/favicon.ico/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="img/favicon.ico/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="img/favicon.ico/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="img/favicon.ico/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="img/favicon.ico/favicon-16x16.png"> <!--css --> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/bootstrap/bootstrap-mod.css"> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"> <!-- Slider --> <link rel="stylesheet" href="layerslider/css/layerslider.css" type="text/css"> <link rel="stylesheet" href="layerslider/css/style.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!--[if lt IE 9]> <script src="layerslider/js/html5.js"></script> <![endif]--> <!-- Owl Carousel Assets --> <link href="owl-carousel/owl.carousel.css" rel="stylesheet"> <link href="owl-carousel/owl.theme.css" rel="stylesheet"> <link href="owl-carousel/owl.transitions.css" rel="stylesheet"> <!--mis estilos --> <link rel="stylesheet" href="css/styles.css"> <script> $ (document).ready(function() { $ ("#desplegable1").css('display','none'); $ ("#desplegable2").css('display','none'); $ (".infantil").mouseover(function() { $ ("#desplegable1").show('slow'); }); $ (".infantil").mouseleave(function() { $ ("#desplegable1").hide('slow'); }); $ (".infantil").hover( function(){ $ ("#desplegable1").css({"background-color":"#0095a6"}); } ); $ (".otros").mouseover(function() { $ ("#desplegable2").show('slow'); }); $ (".otros").mouseleave(function() { $ ("#desplegable2").hide('slow'); }); $ (".otros").hover( function(){ $ ("#desplegable2").css({"background-color":"#0095a6"}); } ); }); </script> <style type="text/css" media="screen"> .ls-layer, .ls-layer * { font-family: 'Pathway Gothic One', sans-serif; font-weight: normal; text-shadow: none !important; font-size: 30px; color:#333; top:50px; } .ls-s-1 { border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; font-weight: normal; } .bg-translucido{ background: #fff; opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */ filter: alpha(opacity=50); /* IE lt 8 */ -ms-filter: "alpha(opacity=50)"; /* IE 8 */ -khtml-opacity: .50; /* Safari 1.x */ -moz-opacity: .50; /* FF lt 1.5, Netscape */ } .plus, .plus2 { text-align: center; width: 50px; height: 50px; font-size: 50px; line-height: 50px; background: #eee; } .plus { color: #3b173d; } .plus2 { color: #1e73be; } .text, .text2 { margin: 0px; display: inline-block !important; padding: 5px 20px 5px 10px; } .text { color: #333; background: rgba(255,255,255,0.8); border-radius: 0px !important; } .text2 { color: #1e73be; } </style> </head> <body> <!--Barra superior todo lo ancho de la página. Fuera del container principal--> <div class="header"> <nav class="navbar navbar-sup navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navegacion"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> <i class="fa fa-bookmark-o fa-2x"></i> </a> </div> <div class="navbar-collapse collapse text-center"> <ul class="nav navbar-nav navbar-left"> <li><a href="natacion.html">NATACIÓN</a></li> <li><a href="/Easo/index.html">ESCUELA</a></li> <li><a href="fitness.html">FITNESS</a></li> <!-- Desplegable infantil --> <li class="infantil"><a href="infantil.html">INFANTIL</a> <ul id="desplegable1"> <li><a href="#" style="color:#FFFFFF;"> EXTRAESCOLARES </a></li> <li><a href="#" style="color:#FFFFFF;">VACACIONES</a></li> </ul> </li> <li><a href="cumpleaños.html">CUMPLEAÑOS</a></li> <li><a href="bienestar.html">BIENESTAR</a></li> <li><a href="galeria.html">GALERÍA</a></li> <!--Desplegable para: colegios y empresas.--> <!--<li><a href="colegios.html">COLEGIOS</a></li> <li><a href="empresas.html">EMPRESAS</a></li>--> <i class="fa fa-bars fa-lg otros" style="color:#FFFFFF;"> <li class="otros"> <ul id="desplegable2"> <li><a href="#" style="color:#FFFFFF;">COLEGIOS</a></li> <li><a href="#" style="color:#FFFFFF;">EMPRESAS</a></li> </ul> </li> </i> </ul> <ul class="nav navbar-nav navbar-right"> <li><a class="acceso" href="area-clientes.html" title="area clientes">ACCESO A CLIENTES</a></li> <li><a class="giro" href="https://www.facebook.com/escolapioscentrodeportivo/?fref=ts" ><i class="fa fa-facebook fa-lg"></i></a></li> <li><a class="giro" href="contacto.html"><i class="fa fa-home fa-lg"></i></a></li> <li> <a role="button" class="giro hidden-xs" data-container="body" data-toggle="popover" data-placement="bottom" data-content="601004597" data-original-title="WHATSAPP:" title="WHATSAPP:"><i class="fa fa-whatsapp fa-lg"></i></a> <a class="giro visible-xs" href="whatsapp://send?text=URL" title="whatsapp"><i class="fa fa-whatsapp fa-lg"></i></a> </li> </ul> </div> </div> </nav> <!-- Zona script--> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="script/bootstrap/bootstrap.min.js"></script> <script src="script/bootstrap/npm.js"></script> </body> </html>
