长下拉菜单会导致页面滚动

Question

我有一个带有CSS的动态菜单。完整代码位于Fiddle here。

#
cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
}#
cssmenu {
    line - height: 1;
    border - radius: 5 px 5 px 0 0; - moz - border - radius: 5 px 5 px 0 0; - webkit - border - radius: 5 px 5 px 0 0;

    width: auto;
}#
cssmenu: after, #cssmenu ul: after {
    content: '';
    display: block;
    clear: both;
}#
cssmenu a {
    background: #141414;
  background: -moz-linear-gradient(top, # 333333 0 % ,
    #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, # 333333), color - stop(100 % , #141414));
  background: -webkit-linear-gradient(top, # 333333 0 % , #141414 100%);
  background: -o-linear-gradient(top, # 333333 0 % , #141414 100%);
  background: -ms-linear-gradient(top, # 333333 0 % , #141414 100%);
  background: linear-gradient(to bottom, # 333333 0 % , #141414 100%);
  color: # ffffff; display: block; font - family: Helvetica, Arial, Verdana, sans - serif; padding: 19 px 20 px; text - decoration: none;
}#
cssmenu ul {
    list - style: none;
}#
cssmenu > ul > li {
    display: inline - block;
    float: left;
    margin: 0;
}#
cssmenu.align - center {
    text - align: center;
}#
cssmenu.align - center > ul > li {
    float: none;
}#
cssmenu.align - center ul ul {
    text - align: left;
}#
cssmenu.align - right > ul {
    float: right;
}#
cssmenu.align - right ul ul {
    text - align: right;
}#
cssmenu > ul > li > a {
    color: #ffffff;
    font - size: 12 px;
}#
cssmenu > ul > li: hover: after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 50 % ;
        bottom: 0;
        border - left: 10 px solid transparent;
        border - right: 10 px solid transparent;
        border - bottom: 10 px solid #0fa1e0;
  margin-left: -10px;
}
# cssmenu > ul > li: first - child > a {
            border - radius: 5 px 0 0 0; - moz - border - radius: 5 px 0 0 0; - webkit - border - radius: 5 px 0 0 0;
        }#
        cssmenu.align - right > ul > li: first - child > a,
        #cssmenu.align - center > ul > li: first - child > a {
            border - radius: 0; - moz - border - radius: 0; - webkit - border - radius: 0;
        }#
        cssmenu.align - right > ul > li: last - child > a {
            border - radius: 0 5 px 0 0; - moz - border - radius: 0 5 px 0 0; - webkit - border - radius: 0 5 px 0 0;
        }#
        cssmenu > ul > li.active > a,
        #cssmenu > ul > li: hover > a {
            color: #ffffff;
            box - shadow: inset 0 0 3 px #000000;
  -moz-box-shadow: inset 0 0 3px # 000000; - webkit - box - shadow: inset 0 0 3 px #000000;
  background: # 070707;
            background: -moz - linear - gradient(top, #262626 0%, # 070707 100 % );
            background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , #262626), color-stop(100%, # 070707));
            background: -webkit - linear - gradient(top, #262626 0%, # 070707 100 % );
            background: -o - linear - gradient(top, #262626 0%, # 070707 100 % );
            background: -ms - linear - gradient(top, #262626 0%, # 070707 100 % );
            background: linear - gradient(to bottom, #262626 0%, # 070707 100 % );
        }#
        cssmenu.has - sub {
            z - index: 1;
        }#
        cssmenu.has - sub: hover > ul {
            display: block;
        }#
        cssmenu.has - sub ul {
            display: none;
            position: absolute;
            min - width: 200 px;
            top: 100 % ;
            left: 0;
        }#
        cssmenu.align - right.has - sub ul {
            left: auto;
            right: 0;
        }#
        cssmenu.has - sub ul li { * margin - bottom: -1 px;
        }#
        cssmenu.has - sub ul li a {
            background: #0fa1e0;
  border-bottom: 1px dotted # 31 b7f1;
            font - size: 11 px;
            filter: none;
            display: block;
            line - height: 120 % ;
            padding: 10 px;
            color: #ffffff;
        }#
        cssmenu.has - sub ul li: hover a {
                background: #0c7fb0;
}
# cssmenu ul ul li: hover > a {
                    color: #ffffff;
                }#
                cssmenu.has - sub.has - sub: hover > ul {
                    display: block;
                }#
                cssmenu.has - sub.has - sub ul {
                    display: none;
                    position: absolute;
                    left: 100 % ;
                    top: 0;
                }#
                cssmenu.align - right.has - sub.has - sub ul,
                #cssmenu.align - right ul ul ul {
                    left: auto;
                    right: 100 % ;
                }#
                cssmenu.has - sub.has - sub ul li a {
                    background: #0c7fb0;
  border-bottom: 1px dotted # 31 b7f1;
                }#
                cssmenu.has - sub.has - sub ul li a: hover {
                        background: #0a6d98;
}
# cssmenu ul ul li.last > a,
                        #cssmenu ul ul li: last - child > a,
                        #cssmenu ul ul ul li.last > a,
                        #cssmenu ul ul ul li: last - child > a,
                        #cssmenu.has - sub ul li: last - child > a,
                        #cssmenu.has - sub ul li.last > a {
                            border - bottom: 0;
                        }

我的问题是，当存在大型产品类别时，菜单列表会变得很长并导致在页面上滚动出现问题。

我试图解决问题（小提琴here），但它无效。你能帮忙吗？