纯css下拉菜单's子菜单滚动不显示多下拉菜单
Pure css dropdown menu's submenu with scroller not showing the multidropdown menu
我在我的一个项目中使用纯css下拉菜单。子菜单包含多个列表，就像代码片段中一样:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border: 1px solid #e08d8d;
}
ul>li {
border-left: 1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #ce4040;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ce4040;
}
li:hover li a:hover {
background: #962e2e;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}<ul class="main-navigation">
<li><a href="#">Home</a>
</li>
<li><a href="#">Front End Design</a>
<ul>
<li><a href="#">HTML</a>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a>
</li>
<li><a href="#">Grids</a>
</li>
<li><a href="#">Frameworks</a>
<ul>
<li><a href="#">Bootstrap</a>
</li>
<li><a href="#">Foundation</a>
</li>
<li><a href="#">Sass</a>
</li>
<li><a href="#">Less</a>
<ul>
<li><a href="#">Bootstrap</a>
</li>
<li><a href="#">Foundation</a>
</li>
<li><a href="#">Sass</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a>
</li>
<li><a href="#">jQuery</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">WordPress Development</a>
<ul>
<li><a href="#">Custom Post Types</a>
<ul>
<li><a href="#">subPortfolios</a>
</li>
<li><a href="#">subTestimonials</a>
</li>
<li><a href="#">subPortfolios</a>
</li>
<li><a href="#">subTestimonials</a>
</li>
</ul>
</li>
<li><a href="#">Themes</a>
</li>
<li><a href="#">Plugins</a>
</li>
<li><a href="#">Themes</a>
</li>
<li><a href="#">Plugins</a>
</li>
<li><a href="#">Themes</a>
</li>
<li><a href="#">Plugins</a>
</li>
<li><a href="#">Options</a>
</li>
<li><a href="#">Options</a>
</li>
<li><a href="#">Themes</a>
</li>
<li><a href="#">Plugins</a>
</li>
<li><a href="#">Options</a>
</li>
<li><a href="#">Options</a>
</li>
</ul>
</li>
<li><a href="#">About Us</a>
</li>
</ul>并尝试像这样放置滚动条通过添加css:
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
结果:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border:1px solid #e08d8d;
}
ul>li{
border-left:1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom:1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #ce4040; }
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
li:hover li { float: none; }
li:hover a { background: #ce4040; }
li:hover li a:hover { background: #962e2e; color:#fff;}
.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
z-index: 9999;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }<ul class="main-navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Front End Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Frameworks</a>
<ul>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Foundation</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Less</a>
<ul>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Foundation</a></li>
<li><a href="#">Sass</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">WordPress Development</a>
<ul>
<li><a href="#">Custom Post Types</a>
<ul>
<li><a href="#">subPortfolios</a></li>
<li><a href="#">subTestimonials</a></li>
<li><a href="#">subPortfolios</a></li>
<li><a href="#">subTestimonials</a></li>
</ul>
</li>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Options</a></li>
<li><a href="#">Options</a></li> <li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Options</a></li>
<li><a href="#">Options</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>通过放置滚轮，第二和第三层下拉菜单不显示。如何放置滚动条而不中断纯multidowndown css的正常功能?我们非常欢迎任何建议、教程和解决方案，只要它能解决问题。
请修改你的css
ul ul ul {
left: 100%;
top: 0;
}
to
ul ul ul {
z-index: 9999;
}
相关文章：
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单，onclick会出现，而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 当打开绝对定位下拉菜单时，页面将滚动到顶部
- 带有可滚动菜单的下拉菜单.无法修复
- 使用下拉菜单平滑滚动到锚标签
- 滚动下拉菜单滚动过多
- 下拉菜单向上滚动
- 创建一个下拉菜单，在页面顶部向上打开，然后向下滚动时向下打开
- 纯css下拉菜单's子菜单滚动不显示多下拉菜单
- Materialize下拉菜单在移动设备中禁用Sly jQuery滚动条
- 下拉菜单中缺少滚动条
