Dropdown menu in a fixed header cut off on mobile - html

Question

I'm having troubles with a dropdown menu in a fixed header on mobile. When I hover over a menu item, its submenu opens but I cannot scroll to see the hidden items, although I've put an overflow-y: scroll in the submenu class.
HTML:
<div class="site-header">
<div class="main-navigation">
<ul class="nav-menu">
<li class="menu-item">Item 1
<ul class="sub-menu">
<li class="menu-item">Item 1.1</li>
<li class="menu-item">Item 1.2</li>
<li class="menu-item">Item 1.3</li>
<li class="menu-item">Item 1.4</li>
<li class="menu-item">Item 1.5</li>
<li class="menu-item">Item 1.6</li>
<li class="menu-item">Item 1.7</li>
<li class="menu-item">Item 1.8</li>
<li class="menu-item">Item 1.9</li>
</ul>
</li>
<li class="menu-item">Item 2
<ul class="sub-menu">
<li class="menu-item">Item 2.1</li>
<li class="menu-item">Item 2.2</li>
<li class="menu-item">Item 2.3</li>
<li class="menu-item">Item 2.4</li>
<li class="menu-item">Item 2.5</li>
<li class="menu-item">Item 2.6</li>
<li class="menu-item">Item 2.7</li>
<li class="menu-item">Item 2.8</li>
<li class="menu-item">Item 2.9</li>
</ul>
</li>
<li class="menu-item">Item 3
<ul class="sub-menu">
<li class="menu-item">Item 3.1</li>
<li class="menu-item">Item 3.2</li>
<li class="menu-item">Item 3.3</li>
<li class="menu-item">Item 3.4</li>
<li class="menu-item">Item 3.5</li>
<li class="menu-item">Item 3.6</li>
<li class="menu-item">Item 3.7</li>
<li class="menu-item">Item 3.8</li>
<li class="menu-item">Item 3.9</li>
</ul>
</li>
<li class="menu-item">Item 4
<ul class="sub-menu">
<li class="menu-item">Item 4.1</li>
<li class="menu-item">Item 4.2</li>
<li class="menu-item">Item 4.3</li>
<li class="menu-item">Item 4.4</li>
<li class="menu-item">Item 4.5</li>
<li class="menu-item">Item 4.6</li>
<li class="menu-item">Item 4.7</li>
<li class="menu-item">Item 4.8</li>
<li class="menu-item">Item 4.9</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.site-header {
position: fixed;
left: 0;
width: 100%;
z-index: 999;
}
.main-navigation {
text-align: center;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
padding: 0.9em;
color: #333;
border: 1px solid #ccc;
cursor: pointer;
text-decoration: none;
}
.main-navigation ul li > ul.sub-menu {
display: none;
overflow-y: scroll;
background: #eaeaea;
}
.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul li.focus > ul.sub-menu {
display: block;
}
FIDDLE:
http://jsfiddle.net/cb0Lbuto/24/
Any ideas? (The header has to be fixed, I cannot change it to relative or absolute)
Thanks in advance

Answer 1

add max-height
.main-navigation ul li > ul.sub-menu {
background: #eaeaea none repeat scroll 0 0;
display: none;
max-height: 320px;
overflow: auto;
}

Answer 2

css style i used.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
border-color:#f2f2f2;
}
.dropdown-submenu:active > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:active > a:after {
border-left-color: white;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown-submenu{
background-color:white;
color:black;
}
js script :-
$(document).ready(function () {
$("li.dropdown-submenu > a").on("click", function () {
$("li.dropdown-submenu").removeClass("open");
if ($(this).parent("li.dropdown-submenu").hasClass("in-use")) {
$(this).parents("li.dropdown-submenu").addClass("open");
$(this).parent("li.dropdown-submenu").removeClass("open");
$(this).parent("li.dropdown-submenu").removeClass("in-use");
$(this).siblings("ul.dropdown-menu").children("li.dropdown-submenu").removeClass("open");
$(this).siblings("ul.dropdown-menu").children("li.dropdown-submenu").removeClass("in-use");
} else {
$(this).parents("li.dropdown-submenu").addClass("open");
$(this).parents("li.dropdown-submenu").addClass("in-use");
}
return false;
});
});