文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >CSS垂直菜单-带有滚动的子菜单

问CSS垂直菜单-带有滚动的子菜单
EN

Stack Overflow用户
提问于 2016-02-15 08:13:38
回答 3查看 15.6K关注 0票数 2

我正在尝试用滚动条制作垂直菜单。

问题是隐藏在滚动条在这里预览下面的子菜单

这是我正在使用的代码

HTML代码

代码语言：javascript
代码运行次数：0
运行
复制
<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代码

代码语言：javascript
代码运行次数：0
运行
复制
.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;
}

有人能看到问题吗？

css
jquery
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-02-15 08:57:33

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

代码语言：javascript
代码运行次数：0
运行
复制
.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/

票数 1
EN

Stack Overflow用户

发布于 2016-02-15 08:27:53

解决:问题与此有关：溢出-y与溢出-x之间的冲突。我使用了链接中描述的解决方法来解决问题。不需要javascript。

​

代码语言：javascript
代码运行次数：0
运行
复制
#wrapper {
   height: 300px;
   overflow-x: hidden;

}

.content{
    background-color:lightgray;

}

.scrollbar{
width:250px;
height: 300px;
margin-top:40px;
margin-left:40px;
float:left;
}


#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;
}
代码语言：javascript
代码运行次数：0
运行
复制
<div id="wrapper">
    <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>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2016-02-15 08:38:55

CSS垂直下拉菜单

代码语言：javascript
代码运行次数：0
运行
复制
<div style="overflow:scroll;"> </div>

http://allittechnologies.blogspot.in/2015/05/vertical-css-menu-for-aspnet.html

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35404344

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档