Muy buenas señores, aqui os expongo mi duda,
Tengo este código que baje de internet y modifique para mi dejarlo a mi gusto, pero en la versión de dispositivo movil el menu despegable no sale debajo de la barra de menu sino bastante mas abajo, y depende del tamaño de pantalla se ve entero o no.
aqui os dejo el código, a ver si me podeis hechar una mano. Gracias.
html
<header>
<div id="logo"><a href="http://www.forosdelweb.com/f4/index.html"><img src="http://www.forosdelweb.com/f4/activos/imagotipo.png" /></a></div>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-list2"></span>Menú</a>
</div>
<nav>
<ul>
<li><a href="http://www.forosdelweb.com/f4/quien.html"><!--<span class="icon-house"></span>-->Quienes somos</a></li>
<li><a href="http://www.forosdelweb.com/f4/tecnologia.html"><!--<<span class="icon-suitcase"></span><-->Tecnología LISOLET</a></li>
<li class="submenu">
<a href="#"><span class="icon-rocket"></span>Aplicaciones<span class="caret icon-arrow-down6"></span></a>
<ul class="children">
<li><a href="http://www.forosdelweb.com/f4/estetica.html">Medicina Estética<span class="icon-dot"></span></a></li>
<li><a href="http://www.forosdelweb.com/f4/dermatologia.html">Dermatología<span class="icon-dot"></span></a></li>
<li><a href="http://www.forosdelweb.com/f4/pie.html">Pie Diabético<span class="icon-dot"></span></a></li>
<li><a href="http://www.forosdelweb.com/f4/traumatologia.html">Traumatología y Medicina deportiva<span class="icon-dot"></span></a></li>
</ul>
</li>
<li><a href="http://www.forosdelweb.com/f4/noesprp.html"><!--<<span class="icon-earth"></span>-->LISOLET no es PRP</a></li>
<li><a href="http://www.forosdelweb.com/f4/calidad.html"><!--<<span class="icon-mail"></span>-->Sistema de calidad</a></li>
<li><a href="http://www.forosdelweb.com/f4/contacto.html"><!--<<span class="icon-mail"></span>-->Donde estamos</a></li>
<li><a href="http://www.forosdelweb.com/f4/peticion.html"><!--<<span class="icon-mail"></span>-->Petición de LISOLET</a></li>
</ul>
</nav>
</header>
css
* {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background:#FEFEFE;
}
.menu_bar {
display:none;
}
header {
width: 100%;
height: 190px;
font-size:14px;
}
header nav {
z-index: 1000;
max-width: 980px;
margin-top: 70px;
float: right;
padding-right: 5px;
}
header nav ul {
list-style:none;
}
header nav ul li {
display: inline-block;
position: relative;
border: solid;
border-width: 1px;
border-color: #2f66b1;
background: #FFFFFF;
border-radius:10px;
}
header nav ul li:hover {
background:#2f66b1;
}
header nav ul li a {
color: #85b3f2;
display: block;
text-decoration: none;
padding: 8px;
}
header nav ul li a span {
margin-right:10px;
}
header nav ul li:hover .children {
display:block;
}
header nav ul li .children {
display: none;
/*background:#011826;*/
position: absolute;
width: 150%;
z-index:1000;
}
header nav ul li .children li {
display:block;
overflow: hidden;
margin-top:1px;
/*border-bottom: 1px solid rgba(255,255,255,.5);*/
}
header nav ul li .children li a {
display: block;
}
header nav ul li .children li a span {
float: right;
position: relative;
top:3px;
margin-right:0;
margin-left:10px;
}
header nav ul li .caret {
position: relative;
top:3px;
margin-left:10px;
margin-right:0px;
}
@media screen and (max-width: 1350px) {
body {
padding-top:80px;
}
.menu_bar {
display:block;
width:100%;
position: fixed;
top:0;
background:#2f66b1;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav {
width: 80%;
height: calc(100% - 80px);
position: fixed;
right:100%;
margin: 0;
overflow: scroll;
}
header nav ul li {
display:block;
border-bottom:1px solid rgba(255,255,255,.5);
}
header nav ul li a {
display: block;
}
header nav ul li:hover .children {
display: none;
}
header nav ul li .children {
width: 100%;
position: relative;
}
header nav ul li .children li a {
margin-left:20px;
}
header nav ul li .caret {
float: right;
}
}
