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 vertical

Solution 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

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

ulli: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;
}

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

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

ulul {
  display: none;
  position: absolute;
  width: 250px;
  height: 100%;
}

ulli {
  background-color: white;
}

<divclass="container"><ulclass="lists"><liclass="parent">str1str2str34
      <ulclass="child"><liclass="parent">A
          <ulclass="child"><li>a11</li><li>a12 </li></ul></li><liclass="parent">B
          <ulclass="child"><liclass="parent">B1
              <ulclass="child"><li>b11</li><li>b12 </li></ul></li><liclass="parent">B2
              <ulclass="child"><li>b21 </li><li>22 </li><li>23 </li></ul></li><liclass="parent">B3
              <ulclass="child"><liclass="parent">B31
                  <ulclass="child"><li>b31</li><li>b32 </li></ul></li><liclass="parent">B32
                  <ulclass="child"><li>b41</li><li>b42</li><li>b43 </li></ul></li></ul></li></ul></li><liclass="parent">C
          <ulclass="child"><li>c11</li><liclass="parent">c12
              <ulclass="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;
}

ulli {
  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 */ulul {
  display: block;
  position: relative;
  width: 250px;
  height: 100%;
}

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

<divclass="container"><ulclass="lists"><liclass="parent">str1str2str34
      <ulclass="child"><liclass="parent">A
          <ulclass="child"><li>a11</li><li>a12 </li></ul></li><liclass="parent">B
          <ulclass="child"><liclass="parent">B1
              <ulclass="child"><li>b11</li><li>b12 </li></ul></li><liclass="parent">B2
              <ulclass="child"><li>b21 </li><li>22 </li><li>23 </li></ul></li><liclass="parent">B3
              <ulclass="child"><liclass="parent">B31
                  <ulclass="child"><li>b31</li><li>b32 </li></ul></li><liclass="parent">B32
                  <ulclass="child"><li>b41</li><li>b42</li><li>b43 </li></ul></li></ul></li></ul></li><liclass="parent">C
          <ulclass="child"><li>c11</li><liclass="parent">c12
              <ulclass="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;
}

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

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

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

ulli {
  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;
}

<divclass="container"><ulclass="lists"><liclass="parent">str1str2str34
      <ulclass="child"><liclass="parent">A
          <ulclass="child"><li>a11</li><li>a12 </li></ul></li><liclass="parent">B
          <ulclass="child"><liclass="parent">B1
              <ulclass="child"><li>b11</li><li>b12 </li></ul></li><liclass="parent">B2
              <ulclass="child"><li>b21 </li><li>22 </li><li>23 </li></ul></li><liclass="parent">B3
              <ulclass="child"><liclass="parent">B31
                  <ulclass="child"><li>b31</li><li>b32 </li></ul></li><liclass="parent">B32
                  <ulclass="child"><li>b41</li><li>b42</li><li>b43 </li></ul></li></ul></li></ul></li><liclass="parent">C
          <ulclass="child"><li>c11</li><liclass="parent">c12
              <ulclass="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>