<div class="menu-bar">
    <ul>
      <li data-dropdown="1">
        <a href="javascript:void(0)">Menu-1</a>
        <ul>
          <li><a href="#menu-1-1">Menu-1-1</a></li>
          <li><a href="#menu-1-2">Menu-1-2</a></li>
        </ul>
      </li>
      
      <li>
        <a href="#menu-2">Menu-2</a>
      </li>
    </ul>

    <ul>
      <li data-dropdown="1">
        <a href="javascript:void(0)">Menu-3</a>
        <ul>
          <li><a href="#menu-3-1">Menu-3-1</a></li>
          <li data-dropdown="1">
            <a href="#menu-3-2">Menu-3-2</a>
            <ul>
              <li><a href="#menu-3-2-1">Menu-3-2-1</a></li>
              <li><a href="#menu-3-2-1">Menu-3-2-2</a></li>
              <li data-dropdown="1">
                <a href="#menu-3-2-3">Menu-3-2-3</a>
                <ul>
                  <li><a href="#menu-3-2-3-1">Menu-3-2-3-1</a></li>
                  <li><a href="#menu-3-2-3-2">Menu-3-2-3-2</a></li>
                  <li><a href="#menu-3-2-3-3">Menu-3-2-3-3</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
html,body{
  margin  : 0;
  padding : 0;
  border  : 0;
  width   : 100%;
  height  : 100%;
}
*, *:before, *:after {
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}


.menu-bar{
  height        : 60px;
  border-bottom : 1px solid #AAA;
  line-height   : 60px;
  display       : -webkit-flex;
  display       : flex;
  -webkit-justify-content : center;
  justify-content         : center;
  -webkit-align-items     : center;
  align-items             : center;
}

/* basic */
.menu-bar ul{
  margin      : 0;
  padding     : 0;
  border      : 0;
}
.menu-bar ul li{
  margin      : 0;
  padding     : 0;
  border      : 0;
  list-style  : none;
}
.menu-bar ul li a{
  display     : inline-block;
  height      : 100%;
  padding     : 0 8px;
  cursor      : pointer;
  text-decoration : none;
  color       : #666;
  white-space : nowrap;
}
.menu-bar ul li a:hover{
  color       : #C66;
}

/* top-menu */
.menu-bar > ul{
  display     : flex;
  height      : 100%;
  min-width   : 100px;
}
.menu-bar > ul > li{
  position    : relative;
}
.menu-bar > ul > li > a{
  min-width   : 100px;
  text-align:center;
}
.menu-bar ul > li:hover > a{
  background-color:#eee;
}
.menu-bar ul > li:hover > a{
  animation: menu-noactive 0.3s linear forwards;
}

.menu-bar ul > li.dropdown > a:after,
.menu-bar ul > li[data-dropdown="1"] > a:after{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 6px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  margin-left:4px;
}


/* second-menu */
.menu-bar > ul > li ul{
  position    : absolute;
  line-height : 30px;
  border:1px solid #aaa;
  border-width:1px 1px 0;
  opacity : 0.0;
  visibility : hidden;
  transform : scale(0);
  transform-origin:top;
}
.menu-bar > ul > li > ul{
  top : 100%;
  left        : 0;
  background-color:white;
}
.menu-bar ul > li:hover > ul{
  visibility     : visible;
  opacity : 1.0;
  animation: menu-list-open 0.1s linear forwards;
}
/* .menu-bar ul > li[data-view="0"] > ul{
  animation: menu-close 0.3s linear forwards;
  animation: menu-list-close 0.1s linear forwards;
} */

.menu-bar > ul > li > ul li{
  position:relative;
  border-bottom : 1px solid #aaa;
}
.menu-bar > ul > li > ul li > a{
  min-width   : 120px;
  text-align:center;
}

/* third-menu */
.menu-bar > ul > li > ul > li ul{
  position:absolute;
  top:0;
  left:100%;
}
.menu-bar > ul > li > ul > li ul > li{
  position:relative;
  min-width:120px;
}


@keyframes menu-noactive{
  0%{
    background-color:#eee;
  }
  100%{
    background-color:rgba(255,255,255,0.0);
  }
}

@keyframes menu-close{
  0%{
    opacity:1.0;
    visibility:visible;
  }
  100%{
    opacity:0.0;
    visibility:hidden;
  }
}
@keyframes menu-list-open{
  0%{
    transform : scaleY(0);
  }
  100%{
    transform : scaleY(1);
  }
}
@keyframes menu-list-close{
  0%{
    transform : scaleY(1);
  }
  100%{
    transform : scaleY(0);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.