如何实现菜单轮播嵌入二级菜单?

<div class="view">
    <div class="pre">上一个</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
                <li>1.4</li>
                <li>1.5</li>
                <li>1.6</li>      
            </ul>
        </li>
    </ul>
    <div class="next">下一个</div>
</div>

代码大概如上,.view为可视区域,设置了宽高,overflow:hidden
<ul>设置足够的宽并让子元素<li>浮动。
当轮播到最后一个<li>的时候鼠标悬浮出现一个二级菜单。

现在问题是,因为.view设置了overflow:hidden,二级菜单超出.view的可视区域被隐藏了,看不见了。

老铁们,大神们,如何解决?

阅读 2.2k
1 个回答

泻药。
看你的二级菜单在x轴方向上是否会有溢出吧,如果仅仅是在y轴方向上超出,那么把overflow:hidden改为overflow-x:hidden就差不多了。
如果都有超出可以考虑将二级菜单放在一级菜单的轮播外去以绝对定位实现定位,当然这样的话,有点会破坏DOM结构的归属。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题