I have a problem with a drop-down menu, when I open the sub-menu "meet and events" or "other services" (when the sample code is executed, you can not see why it is below, which leaves more evidence what is the problem with the scroll) is out of screen and I do not know how to place the scroll so you can download and see so to see the other options.
The problem is generated when I put the header position:fixed because I want it to remain visible when the user visits the page
I tried to place overflow:auto on the menu card that appears #cardMenu but it does not work.
function displayMenu() {
var display;
var cardMenu = document.getElementById("cardMenu");
display = cardMenu.style.display;
if (display == "none" || display.length == 0) { /*|| display.length == 0 detecta el estado del menu*/
cardMenu.style.display = "block";
} else {
cardMenu.style.display = "none";
}
}
function displayOs() {
var display;
var Os = document.getElementById("subMenuOS")
document.getElementById("subMenuCyE").style.display = "none"; //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/
display = Os.style.display;
if (display == "none" || display.length == 0) { /*|| display.length == 0 detecta el estado del menu*/
Os.style.display = "block";
} else {
Os.style.display = "none";
}
}
function displayCyE() {
var display;
var CyE = document.getElementById("subMenuCyE")
document.getElementById("subMenuOS").style.display = "none"; //////////*CIERRA MENU AL SELECCIONAR LA SECCION*/
display = CyE.style.display;
if (display == "none" || display.length == 0) { /*|| display.length == 0 detecta el estado del menu*/
CyE.style.display = "block";
} else {
CyE.style.display = "none";
}
}body {
font-family: frutiger-light, arial;
font-size: 16px;
background: #fff;
position: relative;
color: #4C4C4C;
}
header {
width: 100%;
height: 50px;
position: fixed;
z-index: 1100;
}
nav {
position: relative;
background: #FFD615;
height: 50px;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px #B0B0B0;
}
/*----------header / logo ---------------*/
header h1 {
position: absolute;
z-index: 1200;
background: #fff;
width: 60%;
max-width: 190px;
height: 100%;
margin: 0;
overflow: hidden;
}
header h1 figure a#logo img {
display: block;
margin: 0 auto;
height: 50px;
}
/*----------------------------MENU--------------*/
nav .ioMenuMovil {
width: 30%;
max-width: 100px;
height: 50px;
margin: 0 10px 0 0;
overflow: hidden;
padding: 0;
position: absolute;
right: 0;
display: inline-block;
cursor: pointer;
}
nav .ioMenuMovil img {
position: absolute;
width: 100%;
padding: 16px 10px;
}
/*-----------------TARJETA EXIT------------------*/
nav #cardMenu {
background: #fff;
width: 78%;
max-width: 300px;
min-width: 240px;
position: absolute;
right: 0;
padding-bottom: 30px;
top: 0;
border-left: 3px solid #A7A7A7;
border-bottom: 3px solid #A7A7A7;
display: none;
z-index: 1100;
overflow: auto;
}
nav #cardMenu #hideMenu {
width: 50px;
}
nav #cardMenu #hideMenu:after {
font-family: "icomoon";
content: "\ea0f";
position: absolute;
top: 20px;
right: 20px;
color: #808080;
}
nav #cardMenu ul {
position: relative;
margin-top: 50px;
}
nav #cardMenu ul li {
position: relative;
list-style: none;
}
nav #cardMenu ul li a {
text-decoration: none;
color: #4C4C4C;
font-size: 1.0em;
padding: 10px 50px 10px 20px;
display: block;
}
nav #cardMenu ul li a:hover {
background: #E5E4E4;
border-bottom: 1px solid #BEBEBE;
color: #323232;
}
nav#ioMenu #cardMenu ul li#cYE:before {
font-family: 'icomoon';
content: "\ea43";
font-size: 1em;
position: absolute;
top: 10px;
left: 190px;
}
nav#ioMenu #cardMenu ul li#otrosServicios:before {
font-family: 'icomoon';
content: "\ea43";
font-size: 1em;
position: absolute;
top: 10px;
left: 190px;
}
/*----------------SUBMENUS-----------------------*/
nav#ioMenu #cardMenu ul li ul#subMenuCyE {
display: none;
font-size: .9em;
margin: 0;
padding-left: 25%;
position: relative;
top: 0;
width: 100%;
}
nav#ioMenu #cardMenu ul li ul#subMenuCyE p {
padding: 10px 0 10px 10px;
font-family: frutiger, arial;
font-size: .8em;
}
nav#ioMenu #cardMenu ul li ul#subMenuCyE a {
padding-left: 10px;
}
nav#ioMenu #cardMenu ul li ul#subMenuCyE li:hover {
background: #F2EDED;
border-bottom: 1px solid #D9D9D9;
color: #323232;
font-family: frutiger;
}
nav#ioMenu #cardMenu ul li ul#subMenuOS {
display: none;
font-size: .9em;
margin: 0;
padding-left: 30%;
position: relative;
top: 0;
width: 100%;
}
nav#ioMenu #cardMenu ul li ul#subMenuOS a {
padding-left: 10px;
}<header>
<h1>
<figure>
<a id="logo" href="index.html"><img src="imagenes/el punto logo.jpg" alt="El punto - estudio"></a>
</figure>
</h1>
<nav id="ioMenu">
<figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="imagenes/menu.png" alt="menu"></figure>
<div id="cardMenu">
<figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"></figure>
<ul>
<li><a href="index.html">HOME</a></li>
<li id="diseño"><a href="diseño_Grafico.html">DISEÑO GRAFICO</a></li>
<li id="bolsas"><a href="bolsas_de_papel.html">BOLSAS IMPRESAS</a></li>
<li id="carteleria"><a href="carteleria.html">CARTELERIA</a></li>
<li id="cYE" onClick="displayCyE()"><a href="#">CUMPLES Y EVENTOS</a>
<ul id="subMenuCyE">
<li>Diseños personalizados de</li>
<li><a href="cumples_y_eventos.html#souvenirs">SOUVENIRS</a></li>
<li><a href="cumples_y_eventos.html#tarjetas">TARJETAS </a></li>
<li><a href="cumples_y_eventos.html#pins">PINS</a></li>
<li><a href="cumples_y_eventos.html#banderines">BANDERINES</a></li>
<li><a href="cumples_y_eventos.html#mesas">MESAS DULCES</a></li>
<li><a href="cumples_y_eventos.html#bolcita">BOLCITAS PARA CARAMELOS</a></li>
<li><a class="ultimo" href="cumples_y_eventos.html#bolcita">CAJITAS</a></li>
</ul>
</li>
<li id="otrosServicios" onClick="displayOs()"><a href="#">OTROS SERVICIOS</a>
<ul id="subMenuOS">
<li><a href="otros_servicios.html#papeleria">PAPELERIA COMERCIAL</a></li>
<li><a href="otros_servicios.html#redes">MANEJO DE REDES</a></li>
<li><a href="otros_servicios.html#web">DISEÑO WEB</a></li>
<li><a href="otros_servicios.html#estampado">ESTAMPADOS Y BORDADOS</a></li>
<li><a href="otros_servicios.html#sublimacion">SUBLIMACION</a></li>
<li><a href="otros_servicios.html#pins">PINS PUBLICITARIOS</a></li>
<li><a href="otros_servicios.html#impresion">IMPRESION FOTOGRAFICA</a></li>
<li><a class="ultimo" href="otros_servicios.html#tarjetas">TARJETAS Y SOUVENIRS</a></li>
</ul>
</li>
<li id="contacto"><a onClick="displayFormContact('block')">CONTACTO</a></li>
</ul>
</div>
</nav>
</header>