<ul class="slidenav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="dropdown"><a href="#">Link 3</a>
    <ul class="sub">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 1</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

.slidenav, .slidenav ul {
	margin:0;
	padding:0;
	list-style:none;
}
.slidenav{width:33%;position:relative;}
.slidenav > li{
	padding:0 0 4px;
	position:relative;
}
.slidenav > li:hover{z-index:99}
.slidenav > li > a{
	display:block;
	position:relative;
   	background:rgba(221, 221, 221, 0.7);
	text-decoration:none;
	color:#999;
	border-left:18px solid #db0078;
	padding:9px 0 9px 18px;
	overflow:hidden;
	font-weight:bold;
}
.slidenav > li > a {text-shadow:-300px 0 0 #999;transition:text-shadow .8s ease;}
.slidenav > li:hover > a{text-shadow:1px 1px 0 #000;}
.slidenav > li > a:before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:2;
	transition:transform 1s ease;
	transform:translateX(-100%);
}
.slidenav > li:hover > a:before {transform:translateX(0);}

.slidenav > li:nth-child(1) > a {border-color: #db0078;}
.slidenav > li:nth-child(2) > a {border-color: #722ba8;}
.slidenav > li:nth-child(3) > a {border-color: #532099;}
.slidenav > li:nth-child(4) > a {border-color: #3f3cad;}
.slidenav > li:nth-child(5) > a {border-color: #005b9a;}


/* default sliding colours*/
.slidenav > li:nth-child(1) > a:before{background:rgba(219, 0, 114, 0.3);}
.slidenav > li:nth-child(2) > a:before{background:rgba(114, 43, 168, 0.3);}
.slidenav > li:nth-child(3) > a:before{background:rgba(83, 32, 153, 0.3)}
.slidenav > li:nth-child(4) > a:before{background:rgba(63, 60, 173, 0.3);}
.slidenav > li:nth-child(5) > a:before{background:rgba(0, 91, 154, 0.3);}


/* if you want color to change on hover then change these 5 rules */
/*
.slidenav > li:nth-child(1):hover > a:before{background:rgba(219, 0, 114, 0.3);}
.slidenav > li:nth-child(2):hover > a:before{background:rgba(114, 43, 168, 0.3);}
.slidenav > li:nth-child(3):hover > a:before{background:rgba(83, 32, 153, 0.3)}
.slidenav > li:nth-child(4):hover > a:before{background:rgba(63, 60, 173, 0.3);}
.slidenav > li:nth-child(5):hover > a:before{background:rgba(0, 91, 154, 0.3);}
*/
.dropdown > a:after{
	content:"";
	width: 0; 
  	height: 0; 
  	border-top: 6px solid transparent;
  	border-bottom: 6px solid transparent;
  	border-left: 6px solid #000;
	display:inline-block;
	vertical-align:middle;
	margin:-2px 0 0 5px;
}
ul.sub {
	position:absolute;
	width:50%;
	left:50%;
  margin-left:-999em;/* fallback*/
  margin-left:-100vw;
	top:-100%;
	opacity:0;
	background-color: #f00;
	z-index:-1;
	box-shadow:5px 5px 5px rgba(0,0,0,0.4);
	/* comment the next line out if you want the submenu to disappear quickly */
  transition:opacity 1s ease .1s, top .1s ease .5s, margin 0s  1s;
}
.dropdown:hover .sub {
	top:0;
  margin-left:0;
	opacity:1;
	transition:opacity 1s ease .5s, top .5s ease .5s;
  	z-index:99;
}
.sub a{
	display:block;
	color:#fff;
	padding:10px;
	text-decoration:none;
}
.sub a:hover{background:orange;color:#fff;}

@media screen and (max-width:800px){
  .slidenav{width:auto;margin:10px;}
}