The code is as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style type= "Text/css" >
ul,li,ol{padding:0;margin:0;}
. nav_wrap{height:300px;width:200px;overflow:hidden;border:1px solid #ccc; margin:20px auto;float:left;}
. Nav_ul{height:100%;width:220px;overflow-y:scroll;overflow-x:hidden}
. nav_li{border:1px solid #ccc; margin:-1px;height:40px;line-height:40px;text-align:center;font-size:12px;width : 200px}
. Btn_wrap{text-align:center}
</style>
<body>
<div class= "Nav_wrap" >
<ul class= "Nav_ul" >
<li class= "Nav_li" > I am Menu 1</li>
<li class= "Nav_li" > I am Menu 2</li>
<li class= "Nav_li" > I am Menu 1</li>
<li class= "Nav_li" > I am Menu 2</li>
<li class= "Nav_li" > I am Menu 1</li>
<li class= "Nav_li" > I am Menu 2</li>
<li class= "Nav_li" > I am Menu 1</li>
<li class= "Nav_li" > I am Menu 2</li>
<li class= "Nav_li" > I am Menu 1</li>
<li class= "Nav_li" > I am Menu 2</li>
<li class= "Nav_li" > I am Menu 1</li>
</ul>
</div>
</body>
Original: http://blog.csdn.net/liusaint1992/article/details/51277751
Pure Css,div hides the scroll bar and retains the mouse scrolling effect.