CODEWITHSUNDEEP
htmlcssdrop-down-menu
user11878638
user11878638

Reputation:

nested Dropdown Menu with lists

I am really desperated trying to find my error why this does not work for the level 4. Up to level 3 it works. I want a dropdown menu hide the child of the parents. I am very new to html/CSS and I think the error is within the CSS? I thought I properly adjusted it for the level 4...

Here is the code:

    <!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>

Upvotes: 0

Views: 73

Answers (1)

Md. Golam Rabbani
Md. Golam Rabbani

Reputation: 104

* {
  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>

Upvotes: 1

Related Questions