个人中心
gpt4 book ai didi

html - 左侧菜单的问题

转载 作者：行者123 更新时间：2023-11-28 01:35:09 31 4
gpt4 key购买 nike

我有一个左侧菜单，当我将鼠标悬停在它上面时，子菜单无法正确显示。我认为问题出在 z-index 上，我改了好几次都没有解决。我使用从右到左的 Bootstrap v3.3.7那么这里出了什么问题？ 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>

core.css 是

html {
  position: relative;
  min-height: 100%;
  background: #ebeff2;
  direction: rtl;
}
.container {
  width: auto;
}
#wrapper {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.side-menu {
  bottom: 0;
  top: 0;
  width: 240px;
  z-index: 2;
}
.side-menu.left {
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 60px;

}
body.fixed-left .side-menu.left {
  bottom: 50px;
  height: 100%;
  margin-bottom: -70px;
  margin-top: 0;
  padding-bottom: 70px;
  position: fixed;
}
.sidebar-inner {
  height: 100%;
}
#sidebar-menu,
#sidebar-menu ul,
#sidebar-menu li,
#sidebar-menu a {
  border: 0;
  font-weight: normal;
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-decoration: none;
}
#sidebar-menu {
  padding-bottom: 30px;
  padding-top: 30px;
  width: 100%;
}
#sidebar-menu a {
  line-height: 1.3;
}
#sidebar-menu ul ul {
  display: none;
}
#sidebar-menu ul ul li {
  border-top: 0;
}
#sidebar-menu ul ul li.active a {
  color: #5fbeaa;
}
#sidebar-menu ul ul a {
  color: #75798B;
  display: block;
  padding: 10px 65px 10px 20px;
}
#sidebar-menu ul ul a:hover {
  color: #5fbeaa;
}
#sidebar-menu ul ul a i {
  margin-right: 5px;
}
#sidebar-menu ul ul ul a {
  padding-left: 80px;
}
#sidebar-menu .label {
  margin-top: 2px;
}
#sidebar-menu .subdrop {
  background: #f4f8fb !important;
  border-right: 3px solid #5fbeaa;
  color: #5fbeaa !important;
}
#sidebar-menu > ul > li > a {
  color: #36404a;
  display: block;
  padding: 12px 20px;
  margin: 4px 0;
  border-right: 3px solid #ffffff;
}
#sidebar-menu > ul > li > a:hover {
  color: #5fbeaa;
  text-decoration: none;
}
#sidebar-menu > ul > li > a > span {
  vertical-align: middle;
}
#sidebar-menu ul li .menu-arrow {
  -webkit-transition: -webkit-transform 0.15s;
  -o-transition: -o-transform 0.15s;
  transition: transform .15s;
  position: absolute;
  left: 15px;
  display: inline-block;
  font-family: 'Material Design Iconic Font';
  text-rendering: auto;
  line-height: 18px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  color: #98a6ad;
}
#sidebar-menu ul li .menu-arrow:before {
  content: "\f1b5";
}
#sidebar-menu ul li a.subdrop .menu-arrow {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#sidebar-menu ul li a i {
  display: inline-block;
  font-size: 16px;
  line-height: 17px;
  margin-right: 3px;
  margin-left: 15px;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}
#sidebar-menu ul li a i.md {
  font-size: 18px;
}
#sidebar-menu > ul > li > a > i.i-right {
  float: left;
  margin: 3px 0 0 0;
}
#sidebar-menu > ul > li > a.active {
  background: #f4f8fb !important;
  border-right: 3px solid #5fbeaa;
  color: #5fbeaa !important;
}
.menu-title {
  padding: 12px 20px !important;
  letter-spacing: .035em;
  pointer-events: none;
  cursor: default;
  font-size: 13px;
}
#wrapper.enlarged .menu-title,
#wrapper.enlarged .menu-arrow {
  display: none !important;
}
#wrapper.enlarged #sidebar-menu ul ul {
  border: 2px solid #f4f8fb;
  margin-top: -5px;
  padding-top: 5px;
  z-index: 9999;
  background-color: #ffffff;
}
#wrapper.enlarged .left.side-menu {
  width: 70px;
  z-index: 5;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a {
  padding: 15px 20px;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:hover {
  background: #f4f8fb!important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:active {
  background: #f4f8fb!important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:focus {
  background: #f4f8fb!important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a i {
  margin-left: 40px !important;
  margin-right: 2px;
  font-size: 20px;
}
#wrapper.enlarged .left.side-menu .label {
  position: absolute;
  top: 5px;
  right: 35px;
  text-indent: 0;
  display: block !important;
  padding: .2em .6em .3em !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li {
  position: relative;
  white-space: nowrap;
}
 #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a {
  position: relative;
  width: 260px;
  background: #f4f8fb;
  color: #5fbeaa;
  border-color: #5fbeaa;
} 
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li.has_sub:hover > ul {
 display: block;
  right: 70px;
  position: absolute;
/*  width: 190px; */
  width: auto;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a {
  background: #ffffff;
  box-shadow: none;
  padding-right: 15px;
  position: relative;
  width: 186px;
  z-index: 6;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover {
  color: #5fbeaa;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover a span {
  display: inline;
}
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul {
  display: block;
  left: 70px;
  position: absolute;
  width: 190px;
}
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a {
  background: #ffffff;
  box-shadow: none;
  padding-left: 15px;
  position: relative;
  width: 186px;
  z-index: 6;
}
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a:hover {
  color: #5fbeaa;
}
#wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop {
  color: #5fbeaa !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul {
  display: none;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li.has_sub:hover > ul {
 display: block;
 /* left: 190px; */
right: 190px;
  margin-top: -36px;
 position: absolute;
  width: 190px;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li > a span.pull-right {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  position: absolute;
  right: 20px;
  top: 12px;
  transform: rotate(270deg);
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul ul li.active a {
  color: #5fbeaa;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li > a span {
  display: none;
  padding-left: 10px;
}
#wrapper.enlarged .left.side-menu .user-details {
  display: none;
}
#wrapper.enlarged .content-page {
  margin-right: 70px;
}
#wrapper.enlarged .footer {
  right: 70px;
}
#wrapper.enlarged .topbar .topbar-left {
  width: 70px !important;
}
#wrapper.enlarged .topbar .topbar-left .logo span {
  display: none;
  opacity: 0;
}
#wrapper.enlarged .topbar .topbar-left .logo .icon-c-logo {
  display: block;
  line-height: 60px;
}
#wrapper.enlarged #sidebar-menu > ul > li:hover > a.open :after {
  display: none;
}
#wrapper.enlarged #sidebar-menu > ul > li:hover > a.active :after {
  display: none;
}
#wrapper.enlarged .tips-box {
  display: none;
}

mega.css 代码是

@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.enlarged .left.side-menu #sidebar-menu > ul > li .submenu.megamenu > li 上的 overflow: hidden 阻止了子菜单显示(尝试将其值更改为auto)；
  • 列表项的堆叠(第三个 li 将在第二个 li 之上，第二个 li 将在第一个 li 之上)。您可以为所有三个分配一个 z-index: 0，然后在第二个 li 上分配一个 z-index: 1，但这似乎就像大量手动调整一样，显然无法扩展。

关于html - 左侧菜单的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50727549/

31 4 0
文章推荐： css - HTML 表单字段不会保留伪类
文章推荐： c++ - 在 for 循环中使用 MPI_Irecv 和 MPI_Isend
文章推荐： 两个 Date() 之间的 JavaScript 差异(以月为单位)
文章推荐： javascript - 将元素插入数组，其中对象由用户指定