jquery - 带滚动条的 CSS 垂直菜单子(monad)菜单

Question

我正在尝试制作带有滚动条的垂直菜单。

问题是隐藏在滚动条下方的子菜单， here the preview

这是我使用的代码

HTML代码

<div class="scrollbar" id="ex4">
    <div class="content">
        <div id="menuwrapper">
            <ul>
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Product 1</a>
                            <ul>
                                <li><a href="#">Sub Product 1</a>
                                </li>
                                <li><a href="#">Sub Product 2</a>
                                </li>
                                <li><a href="#">Sub Product 3</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Product 2</a>
                        </li>
                        <li><a href="#">Product 3</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">About Us</a>
                    <ul>
                        <li><a href="#">Faqs</a>
                        </li>
                        <li><a href="#">Contact Us</a>
                        </li>
                        <li><a href="#">Where are we?</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Help</a>

                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Products</a>
                        <ul>
                            <li><a href="#">Product 1</a>
                                <ul>
                                    <li><a href="#">Sub Product 1</a>
                                    </li>
                                    <li><a href="#">Sub Product 2</a>
                                    </li>
                                    <li><a href="#">Sub Product 3</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Product 2</a>
                            </li>
                            <li><a href="#">Product 3</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">About Us</a>
                        <ul>
                            <li><a href="#">Faqs</a>
                            </li>
                            <li><a href="#">Contact Us</a>
                            </li>
                            <li><a href="#">Where are we?</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Help</a>

                        <li><a href="#">Home</a>
                        </li>
                        <li><a href="#">Products</a>
                            <ul>
                                <li><a href="#">Product 1</a>
                                    <ul>
                                        <li><a href="#">Sub Product 1</a>
                                        </li>
                                        <li><a href="#">Sub Product 2</a>
                                        </li>
                                        <li><a href="#">Sub Product 3</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Product 2</a>
                                </li>
                                <li><a href="#">Product 3</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a>
                            <ul>
                                <li><a href="#">Faqs</a>
                                </li>
                                <li><a href="#">Contact Us</a>
                                </li>
                                <li><a href="#">Where are we?</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Help</a>

                            <li><a href="#">Home</a>
                            </li>
                            <li><a href="#">Products</a>
                                <ul>
                                    <li><a href="#">Product 1</a>
                                        <ul>
                                            <li><a href="#">Sub Product 1</a>
                                            </li>
                                            <li><a href="#">Sub Product 2</a>
                                            </li>
                                            <li><a href="#">Sub Product 3</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Product 2</a>
                                    </li>
                                    <li><a href="#">Product 3</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">About Us</a>
                                <ul>
                                    <li><a href="#">Faqs</a>
                                    </li>
                                    <li><a href="#">Contact Us</a>
                                    </li>
                                    <li><a href="#">Where are we?</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Help</a>
            </ul>
        </div>
    </div>

CSS 代码

.scrollbar {
    width: 250px;
    height: 300px;
    background-color: lightgray;
    margin-top: 40px;
    margin-left: 40px;
    overflow-y: scroll;
    float: left;
}
.content {
    height: 450px;
}
#ex4::-webkit-scrollbar {
    width: 8px;
    background-color: #cccccc;
}
#ex4::-webkit-scrollbar-thumb {
    background-color: #333333;
    border-radius: 10px;
}
#ex4::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
    border: 1px solid #333333;
}
#ex4::-webkit-scrollbar-thumb:active {
    background-color: #666666;
    border: 1px solid #333333;
}
#ex4::-webkit-scrollbar-track {
    border: 1px gray solid;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 2px gray inset;
}
#menuwrapper ul,
#menuwrapper ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menuwrapper ul li {
    background-color: #39255e;
    border-bottom: solid 1px white;
    width: 150px;
    cursor: pointer;
}
#menuwrapper ul li:hover,
#menuwrapper ul li.iehover {
    background-color: #6679e9;
    position: relative;
}
#menuwrapper ul li a {
    padding: 5px 15px;
    color: #ffffff;
    display: inline-block;
    text-decoration: none;
}
#menuwrapper ul li ul {
    position: absolute;
    display: none;
}
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul {
    left: 150px;
    top: 0px;
    display: block;
}
#menuwrapper ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover {
    background-color: #6679e9;
}
/* We style the color of level 2 links */

#menuwrapper ul li ul li a {
    display: inline-block;
    width: 120px;
}
#menuwrapper ul li:hover ul li ul,
#menuwrapper ul li.iehover ul li ul {
    position: absolute;
    display: none;
}
#menuwrapper ul li:hover ul li:hover ul,
#menuwrapper ul li.iehover ul li.iehover ul {
    display: block;
    left: 150px;
    top: 0;
}
#menuwrapper ul li:hover ul li:hover ul li,
#menuwrapper ul li.iehover ul li.iehover ul li {
    background: #39255e;
}
#menuwrapper ul li:hover ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover ul li.iehover {
    background: #6679e9;
}
#menuwrapper ul li:hover ul li:hover ul li a,
#menuwrapper ul li.iehover ul li.iehover ul li a {
    color: #ffffff;
}
.clear {
    clear: both;
}

谁能看出问题所在？

Answer 1

问题是您在创建垂直滚动条的元素中定义了一个高度，如果您不需要为您的容器设置固定高度，您可以尝试此更改。

.scrollbar{
    width:250px;
    min-height:300px; /* min-height instead of height */
    background-color:lightgray;
    margin-top:40px;
    margin-left:40px;
    /*overflow-y:scroll;/* /*comment this line */
    float:left;
}

.content{
    min-height:450px; /* min-height instead of height */
}

没有滚动的例子 http://jsfiddle.net/guilhermelucio/0Lxtmeyp/2/

更新:

滚动示例

请参阅 JsFiddle 中的示例:http://jsfiddle.net/guilhermelucio/0Lxtmeyp/3/