Javascript 固定父div中绝对div的滚动条

我在我的网站上有一个固定的标题，在标题内我有一个按钮，可以触发一个垂直的分类菜单，比如amazon.com。问题是菜单中的类别（或列表项）超过了标准视口的高度，如果一个人向下滚动以查看更多类别，菜单div将保持不变，页面上的其他内容将滚动，我已将over flow属性用于我的菜单div，但它没有用。有解决办法吗

.ma-header-container {z-index: 9999;/*background: url(../images/yay-vo/bg.png) no-repeat 100% #fff;*/padding-bottom: 25px;background-size: 100% 100%;position: fixed;left: 0;right: 0;top: 0; }
.scr-ma-header-container {border-bottom: 1px solid #e7e7e7;height: 95px;z-index: 9999;background:#fff;/*padding-bottom: 25px;*/background-size: 100% 100%;position: fixed;left: 0;right: 0;top: 0; }

上面的css是我的固定标题容器

.YV-allcat {
vertical-align: top;
font-family: Arial;
font-size: 15px;
color: #000;
height: 50px;
/*height: 40px;*/
width: 146px;
background-color: transparent;
border-top: 2px solid #c2c2c2;
border-bottom: 1px solid #c2c2c2;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
float: left;
background: none;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
box-shadow: none;
/*background-image: url("../images/yay-vo/menu-arrow.png");
background-repeat: no-repeat;
background-position: 110px 33px;*/
}

这是触发菜单的按钮

.main-menu {
width: 180px;
/* margin-left: 14px; */
padding: 12px 0px;
float: left;
/* background: url(../images/left-menu-bg.png) top left repeat-y; */
position: absolute;
top: 174px;
/* top: 157px; */
/* border-right: 4px solid #565656; */
/* margin-top: 10px; */
background-color: #FFF;
z-index: 9999;
border: 1px solid #cecece;
/* min-height: 546px; */
min-height: 450px;
height: auto;
}

---

这是一个类别超过了数量的菜单，希望它有帮助，溢出属性不起作用，因为我没有给出最大高度，这两行救了我的命

max-height:100%;
overflow-y:auto;

---

给我们看一些代码，我们能帮上什么忙吗？创建一个fiddle@DarrenSweeney我已经粘贴了css。@ZeeshanRizvi阅读了DarrenSweeney发布的内容-创建一个提琴。@RaviH我无法创建一个提琴，因为菜单包含动态内容，html非常复杂，如果您愿意，您仍然可以提供帮助。