Touch mobile menu

by matmat

HTML

<div class="contentsmallbar" onclick="" aria-haspopup="true">
			<div class="wrapper1">
Menu
            </div>
			<div class="menusbwrapper">
				<ul class="menusb">
					<li >aaaaaaaaaaaa</li>
					<li>bbbbbbbbbbbbb </li>
					<li >cccccccccccc</li>
					<li >dddddddddddd </li>
                    <li >aaaaaaaaaaaa</li>
					<li>bbbbbbbbbbbbb </li>
					<li >cccccccccccc</li>
					<li >dddddddddddd </li>
                    <li >aaaaaaaaaaaa</li>
					<li>bbbbbbbbbbbbb </li>
					<li >cccccccccccc</li>
					<li >dddddddddddd </li>
				</ul>
			</div>
		</div>

CSS

.contentsmallbar{
width:100px;
height:30px; 
background:blue;
}
.contentsmallbar:hover{
background: none repeat scroll 0% 0% rgba(168, 168, 168, 1);
}

.contentsmallbar:hover>.menusbwrapper,.contentsmallbar:active>.menusbwrapper,.contentsmallbar:focus>.menusbwrapper{
display:block;
}

.menusbwrapper{
position: absolute;
z-index: 999;
left: 0px;
padding: 0px;
margin: 0px;
display:none; 
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
max-height:12rem;
}
.menusb{
padding: 0px;
margin: 0px;
}
.menusb li{
list-style-type: none;
background: none repeat scroll 0% 0% #A8A8A8;
line-height: 2.3rem;
cursor: pointer;
border-bottom: 1px solid black;
font-size: 1.2rem;
}
.menusb li:hover,.menusbrel li:hover{
background:black!important;
}