javascript - 子菜单从 div 弹出，溢出设置为隐藏

Question

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

    .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>

这是这段代码的演示:sliding menu demo

Answer 1

将子菜单设置到固定位置应该可行。

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

这是 JSFiddle