css ul li dropdown menu

by Daehyun Im

HTML

<ul class="drop_menu">
  <li>Link 1
    <ul>
      <li>Sub Link 1
        <ul>
          <li>sub in sub1</li>
          <li>sub in sub2</li>
          <li>sub in sub3</li>
          <li>sub in sub4</li>          
        </ul>
      </li>
      <li>Sub Link 2</li>
      <li>Sub Link 3</li>
      <li>Sub Link 4</li>
    </ul>
  </li>
  <li>Link 2
    <ul>
      <li>Sub Link 1</li>
    </ul>
  </li>
  <li>Link 3
    <ul>
      <li>Sub Link 1</li>
    </ul>
  </li>
  <li>Link 3
    <ul>
      <li>Sub Link 1</li>
    </ul>
  </li>
</ul>

CSS

.drop_menu {
  background: #000;
  padding: 0;
  margin: 0;
  list-style-type: none;
  width: 100%;
  display: inline-flex;
}

.drop_menu li {
  /*float:left;*/
  flex: 1;
  text-align: center;
  padding: 1rem 1.5rem;
  display: block;
  color: #fff;
}

/* Submenu */

.drop_menu ul {
  position: absolute;
  display: none;
  list-style-type: none;
}

.drop_menu li:hover {
  position: relative;
  background: #667;
}

.drop_menu li:hover ul {
  left: 0;
  top: 100%;
  padding: 0;
  width: 100%;
  display: block;
  font-size: 0.8rem;
}

.drop_menu li:hover ul li {
  display: block;
  background-color: #000;
}

.drop_menu li:hover ul li ul {
  position: absolute;
  display: none;
  list-style-type: none;
}

.drop_menu li:hover ul li:hover {
  background: #667;
}

.drop_menu li:hover ul li:hover ul {
  left: 100%;
  top: 0;
  padding: 0;
  width: 100%;
  display: block;
  background: #999;
}

.drop_menu li:hover ul li:hover ul li{
  background: #888;
}

.drop_menu li:hover ul li:hover ul li:hover{
  background-color: #556;
}

JavaScript

//http://www.cssterm.com/css-menus/horizontal-css-menu/simple-drop-down-menu