Dropdown sub menu

by Yusril Maulidan Raji

HTML

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <div class="dropdown-list draggable" href="#">Link 1
        <div class="dropdown-sub-list">
          <div class="draggable" href="#">Link 4</div>
          <div class="draggable" href="#">Link 5</div>
          <div class="draggable" href="#">Link 6</div>
          <div class="draggable" href="#">Link 7</div>
        </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 2
    <div class="dropdown-sub-list">
          <div class="draggable" href="#">Link 4b</div>
          <div class="draggable" href="#">Link 5b</div>
          <div class="draggable" href="#">Link 6b</div>
          <div class="draggable" href="#">Link 7b</div>
        </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 3</div>
  </div>
</div>

CSS

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-sub-list {
    display: none;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content .draggable {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content .draggable:hover{
  background-color: #f1f1f1
  }

.dropdown-list:hover .dropdown-sub-list{
    display : block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}