每个级别上的Css多级菜单滚动条
这就是我想要做的事情：
实际上那是我想做的事情，但我仍然在这里：http://jsfiddle.net/sadaf2605/74jYb/
当我尝试使用over flow添加滚动条时，这就是我得到的：http://jsfiddle.net/sadaf2605/74jYb/2/
HTML：
<div id="top_cssmenu" style="float:left;">
<div id='cssmenu' >
<ul class="cssmenu1">
<li data-url="news.html" class='active has-sub'><a>Bangladeshi</a>
<ul class="cssmenu2">
<li data-url="news.html" ><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html" class="has-sub"><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html" ><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li><li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html" class="has-sub"><a href='#'>Artist Name</a></li>
</ul>
</li>
<li class='has-sub menu_news'><a href='#'>West Bengal</a>
<ul class="cssmenu2">
<li data-url="news.html"><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html" class="has-sub"><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html" ><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub menu_news'><a href='#'>Other</a>
<ul class="cssmenu2">
<li data-url="news.html"><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li><li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html"><a href='#'>Artist Name</a></li>
<li data-url="news.html" class="has-sub"><a href='#'>Artist Name</a></li>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html" ><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
</ul>
</li>
<li data-url="gallery.html" class="has-sub menu_gallery"><a href='#'><span>Gallery</span></a>
<ul class="cssmenu2">
<li data-url="gallery.html"><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="gallery.html" class="has-sub"><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="gallery.html" ><a href='#'>Artist sub</a></li>
<li data-url="gallery.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
<li data-url="news.html" ><a href='#'>Artist Name</a>
<ul class="cssmenu3">
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
<li data-url="news.html" ><a href='#'>Artist sub</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS：
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul ul{
max-width: 300px;
overflow-y: scroll;
overflow-x:auto;
}
#cssmenu ul{
width: 200px;
}
#cssmenu ul, ul li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu .cssmenu1 {
position: relative;
z-index: 597;
float: left;
}
#cssmenu .cssmenu1 li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li.active,
#cssmenu ul li:hover {
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul li:hover > ul
{
visibility: visible;
}
#cssmenu ul ul {
top: 0;
left: 100%;
}
#cssmenu ul li {
float: none;
}
/* Custom Stuff */
#cssmenu span,
#cssmenu a {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
#cssmenu {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
font-weight: 600;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu > ul > li:first-child {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu > ul > li:last-child {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu > ul > li ul ul li:first-child {
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu > ul > li ul ul li:last-child {
-moz-border-radius: 0 0 5px 0;
-webkit-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul,
#cssmenu li {
}
#cssmenu li {
background-color: #2c2a2a;
border-bottom: 1px solid #4a4a4c;
}
#cssmenu li:hover,
#cssmenu li.active {
background-color: #535456;
color:green;
}
#cssmenu .active {
color: #97d221;
background-color: #535456;
}
#cssmenu li:hover > a,
#cssmenu li.active > a {
color: #97d221;
background-color: #535456;
}
#cssmenu a {
color: #707071;
line-height: 160%;
padding: 16px 8px 16px 28px;
width: 164px;
}
#cssmenu ul ul {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
max-height:360px;
}
#cssmenu ul ul ul{
max-height: 361px;
}
#cssmenu ul ul li {
background: #2c2a2a;
color: #2c2a2a;
border-bottom: 1px solid #4a4a4c;
}
#cssmenu ul ul li:hover {
background: #4a5662;
}
#cssmenu ul ul li a {
color: #707071;
}
#cssmenu ul ul a,
#cssmenu ul ul a span {
font-size: 12px;
}
#cssmenu ul ul ul {
top: 0px;
left: 99%;
}
#cssmenu ul li.active > ul {
visibility: visible; /* show sub menu */
}
现在可以做些什么？
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？