I'm having an issue with a div element that I need to make scrollable.
The menu is contained within this div (covering the full screen) you can see it here. When hovering over an element with children, the menu expands and extends beyond the screen. This is why I added scrolling, but it doesn't scroll all the way to the bottom (hiding the last menu item).
Here is my CSS and HTML:
.tablet-menu {
display: none;
background: #000;
position: fixed;
height: 100%;
width: 100%;
opacity: 0.7;
z-index: 1001;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.tablet-menu.show {
display: block;
}
.tablet-menu-scroll {
overflow: scroll;
height: 100%;
width: 100%;
}
.tablet-menu ul {
top: 0;
bottom: 0;
position: relative;
text-align: center;
padding: 0;
margin: 0;
}
.tablet-menu li {
color: #FFF;
background: #000;
}
.tablet-menu li a {
text-transform: uppercase;
font-family: "Roboto Slab", Times, Georgia, serif;
font-weight: bold;
border-radius: 2px;
border-bottom: 1px solid white;
position: relative;
display: block;
padding-top: 4%;
padding-bottom: 4%;
}<div class="tablet-menu">
<ul class="tablet-menu-scroll">
<?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
</ul>
</div>Apologies for the PHP code, as I am working on WordPress. I included a modified version of my menu without revealing the real page names.
You can view it here: click
I'm unsure where the problem lies exactly.