Html 左侧菜单问题
我有一个左侧菜单，当我将鼠标悬停在它上面时，子菜单无法正确显示。 我想问题出在z-index上，我修改了好几次，但都没有解决。 我使用从右到左引导v3.3.7 那么这里怎么了？Html 左侧菜单问题,html,css,megamenu,Html,Css,Megamenu,我有一个左侧菜单，当我将鼠标悬停在它上面时，子菜单无法正确显示。 我想问题出在z-index上，我修改了好几次，但都没有解决。 我使用从右到左引导v3.3.7 那么这里怎么了？ htmlcode在这里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width
html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<title>dashboard</title>
<link href="bootstrap.rtl.full.css" rel="stylesheet" type="text/css" />
<link href="core.css" rel="stylesheet" type="text/css" />
<link href="mega.css" rel="stylesheet" type="text/css" />
</head>
<body class="fixed-left-void">
<!-- Begin page -->
<div id="wrapper" class="forced enlarged">
<!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<!--- Divider -->
<div id="sidebar-menu">
<ul>
<li class="text-muted menu-title">Navigation</li>
<!--start mega menu-->
<li class="has-submenu has_sub">
<a href="javascript:void(0);" class="waves-effect MegaClick" ><i class="md md-layers">menu</i><span> menu </span><span class="menu-arrow"></span></a>
<ul class="submenu megamenu list-unstyled" >
<li>
<ul>
<li><a href="components-widgets.html">title1</a></li>
<li><a href="components-nestable-list.html">title2</a></li>
<li><a href="components-range-sliders.html">title3</a></li>
<li><a href="components-masonry.html">title4</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="form-elements.html">title5</a></li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><span>sub menu</span> <span class="menu-arrow"></span></a>
<ul style="">
<li><a href="javascript:void(0);"><span>sub title1</span></a></li>
<li><a href="javascript:void(0);"><span>sub title2</span></a></li>
<li><a href="javascript:void(0);"><span>sub title3</span></a></li>
</ul>
</li>
<li><a href="form-validation.html">title6</a></li>
<li><a href="form-pickers.html">title7</a></li>
<li><a href="form-wizard.html">title8</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="form-mask.html">title9</a></li>
<li><a href="form-summernote.html">title10</a></li>
<li><a href="form-wysiwig.html">title11</a></li>
<li><a href="form-code-editor.html">title12</a></li>
<li><a href="form-code-editor.html">title13</a></li>
</ul>
</li>
</ul>
</li>
<!--end mega menu-->
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Left Sidebar End -->
</div>
<!-- END wrapper -->
</body>
</html>
@media (min-width: 992px) {
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu {
white-space: nowrap;
width: auto;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li {
overflow: hidden;
width: 200px;
display:inline-block;
vertical-align: top;
}
}
@media (max-width: 991px) {
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li > ul {
list-style: none;
padding-left: 0;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li > ul > li > span {
display: block;
position: relative;
padding: 15px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
color: #79818a;
}
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul li.has-submenu:hover > ul.submenu.megamenu > li > ul{
display:block;
width: auto;
}
溢出：隐藏在
上，防止子菜单显示（尝试将其值更改为#wrapper.deplified.left.side-menu#sidebar menu>ul>li.submenu.megamenu>li
）auto- 列表项上的堆叠（第三个
将位于第二个li
之上，第二个li
将位于第一个li
之上）。您可以在所有三个上分配一个li
，然后在第二个z-index:0
上分配一个li
，但这似乎需要大量的手动调整，显然不可伸缩z-index:1- 列表项上的堆叠（第三个
@media (min-width: 992px) {
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu {
white-space: nowrap;
width: auto;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li {
overflow: hidden;
width: 200px;
display:inline-block;
vertical-align: top;
}
}
@media (max-width: 991px) {
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li > ul {
list-style: none;
padding-left: 0;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li > ul > li > span {
display: block;
position: relative;
padding: 15px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
color: #79818a;
}
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul li.has-submenu:hover > ul.submenu.megamenu > li > ul{
display:block;
width: auto;
}