<!-- test outside of codepen for mobile behaviour -->
<ul id="nav" class="nav">
  <li class="touch-only"><a href="#nav">Close Subs</a></li>
  <li><a href="#">Level 1</a>
    <ul>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2 longer</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a>
        <ul>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3 longer</a></li>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3</a></li>
        </ul>
      </li>
      <li><a href="#">Level 2</a></li>
    </ul>
  </li>
  <li><a href="#">Level 1</a>
    <ul>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a>
        <ul>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3 longer</a></li>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3</a></li>
        </ul>
      </li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2 longer</a></li>
    </ul>
  </li>
  <li><a href="#">Level 1</a>
    <ul>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a>
        <ul>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3 longer</a></li>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3</a></li>
          <li><a href="#">Level 3</a></li>
        </ul>
      </li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2 longer</a></li>
    </ul>
  </li>
  <li><a href="#">No dropdown</a></li>
  <li><a href="#">Level 1</a>
    <ul>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 2 longer</a></li>
    </ul>
  </li>
</ul>
 body {
	font-family:Verdana, Geneva, sans-serif;
}
ul {
	margin:0;
	padding:0;
	list-style:none;
}
.nav {
	display:table;/*white-space fix*/
	width:100%;
	text-align:center;
	word-spacing:-9em;/*white-space fix*/
}
.nav li {
	position:relative;
	display:inline-block;
	z-index:99;
	text-align:left;
	word-spacing:normal;/*white-space fix*/
}
.nav li > a {
	position:relative;
}
.nav li:hover,.nav > li > a:hover {z-index:105;}
.nav li li {
	display:block
}
.nav a {
	display:block;
	padding:7px 10px;
	background:red;
	color:#fff;
	border:1px solid #000;
	text-decoration:none;
	white-space:nowrap;
	position:relative;
}
.nav li:hover > a, .nav a:hover {
	background:#000;
}
.nav ul {
	position: absolute;
	z-index:104;
	left:-999em;
	top:0;
	opacity:0;
	transition:opacity .5s, left 0s .5s, top .5s;
}
.nav li:hover > ul,
.nav li:focus-within ul{
	left:0;
	top:100%;
	opacity: 1;
	transition:opacity .5s linear, top .5s;
}
.nav ul ul {
	transition:opacity .4s, left 0s .4s, margin 0s .4s;
	z-index:103;
}
.nav li li:hover ul,
.nav li li:focus-within ul{
	top:0;
	margin-left:100%;
	opacity: 1;
	transition:opacity .5s linear, margin .5s;
}

/* arrows */
.nav li a:first-child:not(:last-child) {
	padding-right:20px;/* make space for arrows*/
}
.nav li a:first-child:not(:last-child):after {
	content:"";
	position:absolute;
	right:3px;
	top:50%;
	margin-top:-6px;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid yellow;
}
.nav > li > a:first-child:not(:last-child):after {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid yellow;
	border-bottom:none;
	margin-top:-3px;
}
.nav li:hover a:first-child:not(:last-child):after {
	border-left-color:#fff
}
.nav > li:hover > a:first-child:not(:last-child):after {
	border-left-color:transparent;
	border-top-color:#fff
}
/* allow touch to play */
.nav .touch-only{display:none;left :-10px}
.touch-device .nav .touch-only{display:inline-block}
.touch-device  .nav .touch-only a{background:#000;color:#fff;}

// detect touch 
if ("ontouchstart" in document.documentElement) {
  	document.documentElement.className += " touch-device";
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.