Overflow-y hides my absolute positioned element - html

Question

I have a vertical nav menu and i want it to have scroll on y axis,because its for mobile users.Plus that i want menu to show on click of a icon which is absolute positioned to the menu.But when icon get out of the parent div it dissapears.And yes i readed a lot about this problem,and all guys saying that you must set position to relative on parent div,but in my case my parent div is position:fixed;.I tried to make a outer div of this one and set position to relative,but it didn't work.. ;(Here is my code:
/*-----------------------------------------------
Mobile Icon Style.
-----------------------------------------------*/
.mobile-icon{
position:absolute;
display:block;
width: 40px;
z-index:5;
right:-50px
}
.mobile-icon:before{
width: 100%;
font-size:2em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\64";
}
.mobile-icon:hover{
color:white;
background:black;
}
/*-----------------------------------------------
Mobile Menu Style.
-----------------------------------------------*/
.mobile-menu{
overflow-y:scroll;
position:fixed;
height:100%;
width:70%;
background:white;
z-index:1000;
transform: translate3d(0 ,0 ,0);
transition:transform 0.4s ease;
}
.active-mobile-menu div{
transform:translate3d:(0, 0, 0);
}
.active-mobile-menu .mobile-menu{
transform:translate3d(100% ,0 ,0);
}
.mobile-menu ul{
top:10.2%;
color:black;
text-align:left;
font-weight:bold;
position:relative;
}
.mobile-menu li a {
display:block;
padding: 4% 0;
border-bottom:1px solid black;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu .sub-menu > li:hover > a{
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul{
height:100%;
width:100%;
visibility:hidden;
display:none;
opacity:0;
transition:visibility 0s, opacity 0.5s linear;
background:#fff;
border:none;
position:relative;
}
.mobile-menu ul li:hover ul{
display:block;
opacity:1;
visibility:visible;
}
<div class="mobile-menu">
<span class="mobile-icon"></span>
<header class="mobile-header">
<div class="mobile-branding">
<!--My Logo script is here -->
</div>
</header>
<ul class="mobile-menu-ul">
<div class="caret"></div>
<?php wp_nav_menu(array(
'theme_location'=>
This is the menu List
1.
2.
</ul>
</div>