时间戳

首页 > 解决方案 > 带有列表的嵌套下拉菜单

html - 带有列表的嵌套下拉菜单

问题描述

我真的很想找出我的错误，为什么这对第 4 级不起作用。直到第 3 级才有效。我想要一个下拉菜单隐藏父母的孩子。我对 html/CSS 很陌生，我认为错误在 CSS 中？我以为我为4级正确调整了它...

这是代码：

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    * {box-sizing: border-box;}
    .container {
        height:100%;
    }
    a {
        color:#fff;
        text-decoration:none;
        border-bottom:1px dotted #fff;
        padding:0px 0px 20px 0px;
        width:100%;
        display:block;
        height:100%;
    }
    li {
        padding:20px 20px 0 20px;
        width:100%;
        color:#fff;
    }
    .container ul {height:100%;}
    .container > ul {
        width:250px;
        background-color:#224490;
        position:relative;
        overflow:visible;
    }
    .container > ul > li {}
    .container > ul > li:hover {background-color:#0f1e41;}
    .container > ul > li > ul {
        display:none;
        position:absolute;
        right:-250px;
        top:0;
        width:250px;
        background-color:#18316a;
    }
    .container > ul > li:hover > ul {
        display:block;
    }
    .container > ul > li > ul >li:hover {background-color:#0f1e41;}
    .container > ul > li > ul > li > ul {
        display:none;
        position:absolute;
        right:-250px;
        top:0;
        width:250px;
        background-color:#112551;
    }
    .container > ul > li > ul > li:hover ul {
        display:block;
    }
    .container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}


    .container > ul > li > ul > li >ul >li:hover ul {
        display:block;
    }

    .container > ul > li > ul > li >ul >li >ul >li:hover ul {
        display:block;
    }

    .container > ul > li > ul > li > ul >li >ul >li:hover {background-color:#0f1e41;}

    .container > ul > li > ul > li > ul >li > ul {
        display:none;
        position:absolute;
        right:-250px;
        top:0;
        width:250px;
        background-color:#112551;
    }

    .container > ul > li > ul > li > ul >li>ul >li > ul {
        display:none;
        position:absolute;
        right:-250px;
        top:0;
        width:250px;
        background-color:#112551;
    }
    /* .container > ul > li > ul > li ul li ul li {
        border-bottom:1px dotted #fff;
        padding:20px;
    } */

</style>
</head>

<body>

<div class="container">

<ul class="parent">
    <li>str1str2str34
        <ul class="child">
            <li>A
                <ul class="parent">
                    <li>a11</li>
                    <li>a12 </li>
                </ul>
            </li>
            <li>B
                <ul class="parent">
                    <li>B1
                        <ul class="child">
                            <li>b11</li>
                            <li>b12 </li>
                        </ul>
                    </li>
                    <li>B2
                        <ul class="child">
                            <li>b21 </li>
                            <li>22 </li>
                            <li>23 </li>
                        </ul>
                    </li>
                    <li>B3
                        <ul class="child">
                            <li>B31
                                <ul class="parent">
                                    <li>b31</li>
                                    <li>b32 </li>
                                </ul>
                            </li>
                            <li>B32
                                <ul class="parent">
                                    <li>b41</li>
                                    <li>b42</li>
                                    <li>b43 </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>C
                <ul class="parent">
                    <li>c11</li>
                    <li>c12
                        <ul class="child">
                            <li>b41</li>
                            <li>b42</li>
                            <li>b43 </li>
                        </ul>
                    </li>
                    <li>c13 </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

<script>

$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
        event.preventDefault();
        $(this).children('.child').slideToggle('slow');
        $(this).find('span').toggle();
    });
</script>


</body>
</html>

标签： htmlcssdrop-down-menu

解决方案

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  color: #fff;
  padding: 1rem;
}

li:hover {
  background-color: rgb(4, 50, 83);
}

.container>ul {
  width: 250px;
  background-color: #224490;
  position: relative;
  height: 100vh;
}

ul li{
  display: block;
  position: relative;
  background-color: #224490;
}

ul li:hover>ul{
  display: block;
  position: absolute;
  width: 250px;
  height: 100%;
  left: 250px;
  top: 0;
}

ul ul{
  display: none;
}

ul li {
  background-color: #336699;
}

ul li:hover {
  background-color: #5599aa;
}
<div class="container">

    <ul class="lists">
      <li class="parent">str1str2str34
        <ul class="child">
          <li class="parent">A
            <ul class="child">
              <li>a11</li>
              <li>a12 </li>
            </ul>
          </li>
          <li class="parent">B
            <ul class="child">
              <li class="parent">B1
                <ul class="child">
                  <li>b11</li>
                  <li>b12 </li>
                </ul>
              </li>
              <li class="parent">B2
                <ul class="child">
                  <li>b21 </li>
                  <li>22 </li>
                  <li>23 </li>
                </ul>
              </li>
              <li class="parent">B3
                <ul class="child">
                  <li class="parent">B31
                    <ul class="child">
                      <li>b31</li>
                      <li>b32 </li>
                    </ul>
                  </li>
                  <li class="parent">B32
                    <ul class="child">
                      <li>b41</li>
                      <li>b42</li>
                      <li>b43 </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="parent">C
            <ul class="child">
              <li>c11</li>
              <li class="parent">c12
                <ul class="child">
                  <li>b41</li>
                  <li>b42</li>
                  <li>b43 </li>
                </ul>
              </li>
              <li>c13 </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

推荐阅读