Javascript 子菜单从div中弹出，溢出设置为隐藏

我需要创建带有滑动选项和子菜单的水平菜单。由于滑动选项，我必须将溢出设置为隐藏，但子菜单有问题。我将感谢任何帮助或想法如何解决这个问题

    .horizontalni {
    border:solid 1px rgba(0,0,0,0.3);
    border-radius:4px;
    box-shadow:0 0 0 4px rgba(125,125,125,0.1);
    padding:0;
    position:relative;
    width:auto;
    max-width:800px;
    background:silver;
    overflow:hidden;

}

/* navigation items */
.horizontalni .navigation {
    background:rgba(0,0,0,0.1);
    color:rgba(255,255,255,0.1);
    display:block;
    font-family:verdana,sans-serif;
    font-size:3em;
    height:55px;
    padding-top:0px;
    position:absolute;
    text-align:center;
    text-shadow:rgba(0,0,0,0.1); 0 0 2px;
    width:50px;
    -moz-transition:all 0.4s;
    -ms-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
}

.horizontalni:hover .navigation {
    background:rgba(0,0,0,0.3);
    color:rgba(255,255,255,0.8);
    text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}

.horizontalni .navigation:hover {
    background:rgba(0,0,0,0.5);
}

.horizontalni .previous {
    left:0;
}

.horizontalni .next {
    right:0;
}

/* carousel container */
.horizontalni ul {
    -moz-box-orient:horizontal;
    -ms-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    -o-box-orient:horizontal;
    box-orient:horizontal;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-box;
    display:-o-box;
    display:box;

    list-style-type:none;
    margin-top:5px;
    margin-bottom:5px;
    padding:0;

}

/* standard width and height for the carousel items */
.horizontalni li {
    border:solid 1px #333;
    height:40px;
    margin-right:10px;
    width:auto;
    min-width:150px;
    max-width:300px;
}

/* animation properties for the carousel */
.animate ul {
    -moz-transition:margin 1s;
    -ms-transition:margin 1s;
    -webkit-transition:margin 1s;
    -o-transition:margin 1s;
    transition:margin 1s;
}

/* different color for each of our items */
.horizontalni li {
  box-shadow: inset 0 0 0 1px #8a8a8a;
  -moz-box-shadow: inset 0 0 0 1px #8a8a8a;
  -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
  background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
  background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
  background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  text-align: center;
}
.horizontalni a {
  color: #ffffff;
  display: inline-block;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #333333;
}

.horizontalni > ul > li a {
padding-left:10px;
padding-right:10px;
  line-height: 40px;
  filter: none;
}

.horizontalni > ul > li:hover {
  background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
  background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
  filter: none;
}


.horizontalni .has-sub:hover ul {
  display: block;
    z-index:1;

}
.horizontalni .has-sub ul {
  display: none;
  min-width: 100%;
  text-align: center;
  IE7

  *width: 100%;
}
.horizontalni .has-sub ul li {
  text-align: center;
}
.horizontalni .has-sub ul li a {
  border-top: 0 none;
  border-left: 1px solid #5d5d5d;
  display: block;
  line-height: 120%;
  padding: 9px 5px;
  text-align: center;
  z-index:1;
}

        <div id="carousel" class="horizontalni wrapper">
        <a href="" class="navigation previous">&laquo;</a>
        <a href="" class="navigation next">&raquo;</a>
        <ul>
            <li ><a href="#">Test1</a></li>
            <li ><a>Test2</a></li>
            <li><a>Test3</a></li>
            <li ><a>Test4</a></li>
            <li ><a>Test5</a></li>
            <li class="has-sub parent"><a>Test6</a>
                <div class="wrapper">
                    <ul class="sub">
                        <li><a>Test61</a></li>
                        <li><a>Test62</a></li>
                        <li><a>Test63</a></li>
                    </ul>
                </div>
            </li>
            <li class="child-element"><a>Test7</a></li>
            <li class="child-element"><a>Test8</a></li>
            <li class="child-element"><a>Test9</a></li>
        </ul>
    </div>
    <script src="http://www.andismith.com/flexbox-carousel/library/js/modernizr.js"></script>   
    <script src="http://www.andismith.com/flexbox-carousel/library/js/common.js"></script>

.horizontalni{
边框：实心1pxRGBA（0,0,0,0.3）；
边界半径：4px；
盒影：0 0 4×rgba（125125,0.1）；
填充：0；
位置：相对位置；
宽度：自动；
最大宽度：800px；
背景：银；
溢出：隐藏；
}
/*导航项目*/
.水平导航{
背景：rgba（0,0,0,0.1）；
颜色：rgba（255255,0.1）；
显示：块；
字体系列：verdana，无衬线；
字号：3em；
高度：55px；
填充顶部：0px；
位置：绝对位置；
文本对齐：居中；
文本阴影：rgba（0,0,0,0.1）；0.2px；
宽度：50px；
-moz转换：全部为0.4s；
-ms转换：所有0.4s；
-webkit转换：所有0.4s；
-o型过渡：均为0.4s；
过渡：全部为0.4s；
}
.horizontalni：悬停。导航{
背景：rgba（0,0,0,0.3）；
颜色：rgba（255255,0.8）；
文本阴影：rgba（0,0,0,0.7）；0.2px；
}
.horizontalni.导航：悬停{
背景：rgba（0,0,0,0.5）；
}
.horizontalni.以前的{
左：0；
}
horizontalni.下一个{
右：0；
}
/*转盘式集装箱*/
乌尔霍里塔尼酒店{
-moz盒方向：水平；
-ms盒方向：水平；
-webkit盒方向：水平；
-o形盒方向：水平；
盒子方向：水平；
显示器：-moz盒；
显示：-ms框；
显示：-网络工具包盒；
显示器：-o形盒；
显示：框；
列表样式类型：无；
边缘顶部：5px；
边缘底部：5px；
填充：0；
}
/*转盘项目的标准宽度和高度*/
李浩然{
边框：实心1px#333；
高度：40px；
右边距：10px；
宽度：自动；
最小宽度：150px；
最大宽度：300px；
}
/*旋转木马的动画特性*/
.制作动画{
-moz过渡：边距1s；
-ms转换：边缘1s；
-webkit转换：边距1s；
-o-过渡：边缘1s；
过渡：边缘1s；
}
/*我们的每件商品都有不同的颜色*/
李浩然{
盒影：插入0 1px#8a8a8a；
-moz盒阴影：插入0 1px#8a8a8a；
-webkit盒阴影：插入0 1px#8a8a8a；
背景：#4a4a4a url（images/grad_dark.png）repeat-x左上角；
背景：-莫兹线性梯度（顶部，#8a8a8a 0%，#707050%，#626251%，#7878100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#8a8a8a）、颜色停止（50%、#707070）、颜色停止（51%、#626262）、颜色停止（100%、#787878））；
背景：-webkit线性梯度（顶部，#8a8a8a 0%，#707070 50%，#6262 51%，#787878 100%）；
背景：-o-线性梯度（顶部，#8a8a8a 0%，#707050%，#626251%，#7878100%）；
背景：-ms线性梯度（顶部，#8a8a8a 0%，#707070 50%，#626251%，#787878 100%）；
背景：线性梯度（至底部，#8a8a8a 0%，#707050%，#626251%，#7878100%）；
过滤器：progid:dximagetransform.microsoft.gradient（startColorstr='#8a8a8a'，endColorstr='#78787878'，GradientType=0）；
文本对齐：居中；
}
水平面a{
颜色：#ffffff；
显示：内联块；
字体系列：“Lucida Grande”、“Lucida Sans Unicode”、Helvetica、Arial、Verdana、Sans serif；
字体大小：12px；
最小宽度：35px；
文本对齐：居中；
文字装饰：无；
文本阴影：0-1px0#333；
}
.horizontalni>ul>LIA{
左侧填充：10px；
右边填充：10px；
线高：40px；
过滤器：无；
}
.horizontalni>ul>li:悬停{
背景：#8a8a8url（images/grad_dark.png）重复-x左下角；
背景：-莫兹线性梯度（顶部，#646464 0%，#4a4a4a 50%，#3b3b3b 51%，#525252 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#646464）、颜色停止（50%，#4a4a4a）、颜色停止（51%，#3b3b3b）、颜色停止（100%，#525252））；
背景：-webkit线性梯度（顶部，#646464 0%，#4a4a4a 50%，#3b3b3b 51%，#525252 100%）；
背景：-o-线性梯度（顶部，#646464 0%，#4a4a4a 50%，#3b3b3b 51%，#525252 100%）；
背景：-ms线性梯度（顶部，#646464 0%，#4a4a4a 50%，#3b3b3b 51%，#525252 100%）；
背景：线性梯度（至底部，#646464 0%，#4a4a4a 50%，#3b3b3b 51%，#525252 100%）；
过滤器：progid:dximagetransform.microsoft.gradient（startColorstr='#8a8a8a'，endColorstr='#78787878'，GradientType=0）；
过滤器：无；
}
.horizontalni.has sub:悬停ul{
显示：块；
z指数：1；
}
.horizontalni.has子ul{
显示：无；
最小宽度：100%；
文本对齐：居中；
IE7
*宽度：100%；
}
.horizontalni.有子ul li{
文本对齐：居中；
}
.horizontalni.有子ul li a{
边界顶部：0无；
左边框：1px实心#5d5d；
显示：块；
线高：120%；
填充：9px 5px；
文本对齐：居中；
z指数：1；
}


将子菜单设置为固定位置应该可以工作

.has-sub.parent .wrapper {
    position: fixed;
}

这是一个
为什么不在旋转木马上添加一个与旋转木马高度和宽度相同的包装，并将溢出隐藏在其上？这仍然会切断下拉列表。