<ul id="dropdownMenu">
  <div>
    <div>
      <ul>
        <li>
          <a href="#">menu1</a>
          <ul>
            <li>
              <a href="#">item1-1</a>
            </li>
            <li>
              <a href="#">item1-2</a>
            </li>
            <li>
              <a href="#">item1-3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">menu2</a>
          <ul>
            <li>
              <a href="#">item2-1</a>
              <ul>
                <li><a href="#">item2-1-1</a></li>
                <li><a href="#">item2-1-2</a></li>
                <li><a href="#">item2-1-3</a></li>
              </ul>
            </li>
            <li>
              <a href="#">item2-2</a>
            </li>
            <li>
              <a href="#">item2-3</a>
              <ul>
                <li><a href="#">item2-3-1</a></li>
                <li><a href="#">item2-3-2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">menu3</a>
        </li>
        <li>
          <a href="#">menu4</a>
          <ul>
            <li>
              <a href="#">item4-1</a>
            </li>
            <li>
              <a href="#">item2-2</a>
              <ul>
                <li><a href="#">item4-2-1</a></li>
                <li><a href="#">item4-2-2</a></li>
                <li><a href="#">item4-2-3</a></li>
                <li><a href="#">item4-2-4</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</ul>

    
  #dropdownMenu {
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: auto;
    color: #ffffff;
  }

  #dropdownMenu ul {
    background: #ffffff ;
    height: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex ;
    text-align: left;
    box-shadow: 1px 1px 2px gray ;
  }

  #dropdownMenu li {
    float: none;
    display: inline-block;
    padding: 0px;
    width: 100% ;
  }

  #dropdownMenu li a {
    background: #ffffff ;
    display: block;
    margin: 0px;
    text-align: center;
    font-family: sans-serif ;
    font-size: 0.9em ;
    text-decoration: none;
    color: #000000 ;
  }

  #dropdownMenu > ul > li > a {
    color: #F4F9FF ;
  }

  #dropdownMenu ul ul a {
    color: #000000;
  }

  #dropdownMenu li > a:hover, #cssnav ul li:hover {
    color: #ffffff ;
    background-color: #d3d3d3;
    text-decoration: none;
  }

  #dropdownMenu li ul {
    background: #ffffff ;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 200px;
    z-index:9999;
    border: 0px;
  }

  #dropdownMenu li:hover ul {
    display: block;
  }

  #dropdownMenu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
  }

  #dropdownMenu li:hover li a {
    background: #ffffff ;
    text-decoration: none;
  }

  #dropdownMenu li ul a {
    display: block;
    height: auto;
    margin: 0px;
    padding: 10px;
    text-align: left;
  }

  #dropdownMenu li ul a:hover, #dropdownMenu li ul li:hover > a {
    color: #ffffff ;
    background-color: #d3d3d3;
    border: 0px;
    text-decoration: none;
  }
  
  #dropdownMenu li li {
    height: 0;
    overflow: hidden;
    transition: .2s;
  }

  #dropdownMenu li:hover > ul > li {
    height: 3rem ;
    overflow: visible;
  }

  #dropdownMenu li ul li ul {
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px ;
    position: relative;
    width: 100% ;
    top: -40px ;
    left: 100% ;
    z-index:9999;
  }

  #dropdownMenu li:nth-child(4) ul li ul {
    left: -100%;
  }

  #dropdownMenu li li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
  }

    

<style>
  #dropdownMenu {
    border: 0px;
    margin: 0px;
    padding: 0px;
    width: auto;
    color: #ffffff;
  }

  #dropdownMenu ul {
    background: #ffffff ;
    height: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex ;
    text-align: left;
    box-shadow: 1px 1px 2px gray ;
  }

  #dropdownMenu li {
    float: none;
    display: inline-block;
    padding: 0px;
    width: 100% ;
  }

  #dropdownMenu li a {
    background: #ffffff ;
    display: block;
    margin: 0px;
    text-align: center;
    font-family: sans-serif ;
    font-size: 0.9em ;
    text-decoration: none;
    color: #000000 ;
  }

  #dropdownMenu > ul > li > a {
    color: #F4F9FF ;
  }

  #dropdownMenu ul ul a {
    color: #000000;
  }

  #dropdownMenu li > a:hover, #cssnav ul li:hover {
    color: #ffffff ;
    background-color: #d3d3d3;
    text-decoration: none;
  }

  #dropdownMenu li ul {
    background: #ffffff ;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 200px;
    z-index:9999;
    border: 0px;
  }

  #dropdownMenu li:hover ul {
    display: block;
  }

  #dropdownMenu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
  }

  #dropdownMenu li:hover li a {
    background: #ffffff ;
    text-decoration: none;
  }

  #dropdownMenu li ul a {
    display: block;
    height: auto;
    margin: 0px;
    padding: 10px;
    text-align: left;
  }

  #dropdownMenu li ul a:hover, #dropdownMenu li ul li:hover > a {
    color: #ffffff ;
    background-color: #d3d3d3;
    border: 0px;
    text-decoration: none;
  }
  
  #dropdownMenu li li {
    height: 0;
    overflow: hidden;
    transition: .2s;
  }

  #dropdownMenu li:hover > ul > li {
    height: 3rem ;
    overflow: visible;
  }

  #dropdownMenu li ul li ul {
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px ;
    position: relative;
    width: 100% ;
    top: -40px ;
    left: 100% ;
    z-index:9999;
  }

  #dropdownMenu li:nth-child(4) ul li ul {
    left: -100%;
  }

  #dropdownMenu li li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
  }
</style>


<ul id="dropdownMenu">
  <div>
    <div>
      <ul>
        <li>
          <a href="#">menu1</a>
          <ul>
            <li>
              <a href="#">item1-1</a>
            </li>
            <li>
              <a href="#">item1-2</a>
            </li>
            <li>
              <a href="#">item1-3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">menu2</a>
          <ul>
            <li>
              <a href="#">item2-1</a>
              <ul>
                <li><a href="#">item2-1-1</a></li>
                <li><a href="#">item2-1-2</a></li>
                <li><a href="#">item2-1-3</a></li>
              </ul>
            </li>
            <li>
              <a href="#">item2-2</a>
            </li>
            <li>
              <a href="#">item2-3</a>
              <ul>
                <li><a href="#">item2-3-1</a></li>
                <li><a href="#">item2-3-2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">menu3</a>
        </li>
        <li>
          <a href="#">menu4</a>
          <ul>
            <li>
              <a href="#">item4-1</a>
            </li>
            <li>
              <a href="#">item2-2</a>
              <ul>
                <li><a href="#">item4-2-1</a></li>
                <li><a href="#">item4-2-2</a></li>
                <li><a href="#">item4-2-3</a></li>
                <li><a href="#">item4-2-4</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</ul>