Dropddown menu top-down

问题

I wonder how I can get this dropdown menu open its childrens from top to bottom instead from left to right? Having the li's inside the ul's open up horizontally instead of vertically.

Also I want to make a specific list visible and not hidden like all others. I tried to label this ul with a own class named 'last' and making it visible with CSS... I have no experience using CSS.

Thank you very much.

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

ul.last {
  visibility: visible;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  color: black;
  padding: 1rem;
}

.container>ul {
  width: 250px;
  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: white;
}

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

回答1:

I have changed the display in ul li from block to inline-block. In order to position correctly, I have commented out the left: 250px; and top: 0; in ul li:hover>ul

ul li {
  display: inline-block; /* Change form block to inline-block */
  position: relative;
  background-color: #224490;
}

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

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

ul.last {
  visibility: visible;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  color: black;
  padding: 1rem;
  padding-left: 0; /* Edit 1: childrens right beneath the parent */
}

.container>ul {
  width: 250px;
  position: relative;
  height: 100vh;
}

ul li {
  display: inline-block; /* Change form block to inline-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;
  position: absolute;
  width: 250px;
  height: 100%;
}

ul li {
  background-color: white;
}

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

Update: To have all children visible all the time

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

ul.last {
  visibility: visible;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  color: black;
  padding: 1rem;
  padding-left: 0; /* Edit 1: childrens right beneath the parent */
}

.container>ul {
  width: 250px;
  position: relative;
  height: 100vh;
}

ul li {
  display: inline-block; /* Change form block to inline-block */
  position: relative;
  background-color: #224490;
}

/* Comment out hover function */
/*
ul li:hover>ul {
  display: block;
  position: relative;
  width: 250px;
  height: 100%;
  /* left: 250px; 
     top: 0; 
}
*/
/* Update to always show the children */
ul ul {
  display: block;
  position: relative;
  width: 250px;
  height: 100%;
}

ul li {
  background-color: white;
}
/* Flexbox to configure A B C into coloumn */
ul.lists > li > ul {
  display: flex;
}

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

Based on our discussion, I have implemented the code where open up the child all from the absolute left and not from below the parent li but instead under the FIRST parent li. But, the limitation is to have a fixed width for each li. It is expected that the ABC list will cover the D list when hovering over it.

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

ul.last {
  visibility: visible;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  color: black;
  padding: 1rem;
  padding-left: 0;  /* Edit 1: childrens right beneath the parent */
}

.container>ul {
  width: 250px;
  position: relative;  /* height: 100vh; */
}

ul.lists>li {
  position: relative;
}

ul li {
  display: inline-block;  /* Change form block to inline-block */
  background-color: #224490;
}

ul li:hover>ul {
  display: block;
  position: absolute;
  width: 250px;
  height: 100%;
  z-index: 1;
  /* left: 250px;
    top: 0; */
}

ul ul {
  display: none;
  /* position: absolute;
    width: 250px;
    height: 100%; */
}

ul li {
  background-color: white;
}

ul>li {
  position: absolute;
}

ul>li:nth-child(2) {
  left: 50px;
}

ul>li:nth-child(3) {
  left: 100px;
}

ul>li:nth-child(4) {
  left: 150px;
}

ul>li:nth-child(5) {
  left: 200px;
}

ul>li:nth-child(2)>ul {
  left: -50px;
}

ul>li:nth-child(3)>ul {
  left: -100px;
}

ul>li:nth-child(4)>ul {
  left: -150px;
}

ul>li:nth-child(5)>ul {
  left: -200px;
}

<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>
  <ul>
    <li> D1 </li>
    <li> D2 </li>
    <li> D3 </li>
  </ul>
</div>

来源：https://stackoverflow.com/questions/62211233/dropddown-menu-top-down

标签

html

css

drop-down-menu