Question

我正试图在我的slyding下拉菜单中解决溢出问题。对于slyding我正在使用als-js框架。问题是，如果我设置overflow：hidden属性，我的下拉菜单就不再明显了。如果我只是设置overflow-x：hidden我会得到一个滚动条。

<div class="als-container" id="cssmenu"> <span class="als-prev"><img src="back.png" alt="back" title="previous" /></span>

<div class="als-viewport">
    <ul class="als-wrapper">
        <li class='als-item active'><a href='index.html'>Home</a>

            <ul>
                <li class='final'><a href='#'>Test 1</a>

                </li>
                <li class='final'><a href='#'>Test 2</a>

                </li>
            </ul>
            <li class=' als-item has-sub '><a href='#'>Products</a>

                <ul>
                    <li class='final'><a href='#'>Product 1</a>

                    </li>
                    <li class='final'><a href='#'>Product 2</a>

                    </li>
                    <li class='final'><a href='#'>Product 2</a>

                    </li>
                    <li class='final'><a href='#'>Product 2</a>

                    </li>
                    <li class='final'><a href='#'>Product 2</a>

                    </li>
                    <li class='final'><a href='#'>Product 2</a>

                    </li>
                </ul>
            </li>
            <li class="als-item"><a href='#'>About</a>

            </li>
            <li class='als-item active'><a href='index.html'>Admin</a>

            </li>
            <li class='als-item active'><a href='index.html'>Route</a>

            </li>
    </ul>
</div>

JQUERY：

$(document).ready(function () {
$("#cssmenu").als({
    visible_items: 4,
    scrolling_items: 2,
    orientation: "horizontal",
    circular: "yes",
    autoscroll: "no"
});
});

这是我小提琴的链接。 http://jsfiddle.net/9zapu02q/11/

也许有人可以帮我找到解决方案。

Answer 1

<强> SOLUTION

你的div.als-viewport必须有更高的高度......但你的脚本是设置div高度，所以你需要使用“重要”来覆盖这个值。

.als-viewport {
  height: 300px !IMPORTANT;
  ...
}

html溢出：隐藏在下拉菜单中

1 个答案: