<div class="parts">
	<h2>Simple Dropdown Menu</h2>
	<ul>
		<li class="dropdown-here">
			<a href="">Demo 1</a>
			<ul class="my-dropdown1">
				<li><a href="">sub menu1</a></li>
				<li><a href="">sub menu2</a></li>
				<li><a href="">sub menu3</a></li>
			</ul>
		</li>
	</ul>
</div>


<div class="parts">
	<h2>Animated Up Dropdown Menu</h2>
	<ul>
		<li class="dropdown-here">
			<a href="">Demo 2</a>
			<ul class="my-dropdown1 animatedup-dw">
				<li><a href="">sub menu1</a></li>
				<li><a href="">sub menu2</a></li>
				<li><a href="">sub menu3</a></li>
			</ul>
		</li>
	</ul>
</div>


<div class="parts">
	<h2>Animated Down Dropdown Menu</h2>
	<ul>
		<li class="dropdown-here">
			<a href="">Demo 3</a>
			<ul class="my-dropdown1 animatedown-dw">
				<li><a href="">sub menu1</a></li>
				<li><a href="">sub menu2</a></li>
				<li><a href="">sub menu3</a></li>
			</ul>
		</li>
	</ul>
</div>


<div class="parts">
	<h2>Animated Left Dropdown Menu</h2>
	<ul>
		<li class="dropdown-here">
			<a href="">Demo 4</a>
			<ul class="my-dropdown1 animateleft-dw">
				<li><a href="">sub menu1</a></li>
				<li><a href="">sub menu2</a></li>
				<li><a href="">sub menu3</a></li>
			</ul>
		</li>
	</ul>
</div>

<div class="parts">
	<h2>Animated Right Dropdown Menu</h2>
	<ul>
		<li class="dropdown-here">
			<a href="">Demo 5</a>
			<ul class="my-dropdown1 animateright-dw">
				<li><a href="">sub menu1</a></li>
				<li><a href="">sub menu2</a></li>
				<li><a href="">sub menu3</a></li>
			</ul>
		</li>
	</ul>
</div>


<div class="parts">
	<h2>Animated FadeIn Dropdown Menu</h2>
	<ul>
		<li class="dropdown-here">
			<a href="">Demo 6</a>
			<ul class="my-dropdown1 animatesd-dw">
				<li><a href="">sub menu1</a></li>
				<li><a href="">sub menu2</a></li>
				<li><a href="">sub menu3</a></li>
			</ul>
		</li>
	</ul>
</div>
*{
	margin:0;
	padding: 0px;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}
body {
    padding: 20px;
    font-family: cursive;
}
h2 {
    margin-bottom: 15px;
}
.parts {
    border: 1px solid #ececec;
    padding: 30px;
}


/*====== Common css dropdown =========*/
.dropdown-here {
    position: relative;
}
.dropdown-here > a {
    color: #fff;
    font-size: 18px;
    background: #5cdb94;
    padding: 10px 38px 10px 22px;
    display: inline-block;
    position: relative;
}
.dropdown-here > a::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    position: absolute;
    top: 21px;
    transition: all 0.5s;
    right: 16px;
}
.my-dropdown1 li a {
    padding: 3px 15px;
    display: inline-block;
    width: 100%;
    transition: all 0.5s;
}
.my-dropdown1 li a:hover{
	padding-left: 17px;
}
.my-dropdown1::after {
    content: "";
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid white;
    position: absolute;
    top: -8px;
    left: 15px;
}
/*====== Common css dropdown =========*/


/*====== drop down 1 =========*/
.my-dropdown1 {
    position: absolute;
    left: 0;
    min-width: 168px;
    background: #fff;
    box-shadow: 0px 0px 3px 0px #ccc;
    transition: all 0.5s;
    padding: 6px 0 10px;
    display: none;
}
.dropdown-here:hover .my-dropdown1 {
    display: block;
}
/*====== drop down 1 =========*/


/*====== drop down 2 =========*/
.animatedup-dw {
    display: block;
    margin-top: 20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatedup-dw{
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
/*====== drop down 2 =========*/


/*====== drop down 3 =========*/
.animatedown-dw {
    display: block;
    margin-top: -20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatedown-dw{
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
}
/*====== drop down 3 =========*/


/*====== drop down 4 =========*/
.animateleft-dw {
    display: block;
    left: -20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animateleft-dw{
    visibility: visible;
    opacity: 1;
    left: 0px;
}
/*====== drop down 4 =========*/


/*====== drop down 5 =========*/
.animateright-dw {
    display: block;
    left: 20px;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animateright-dw{
    visibility: visible;
    opacity: 1;
    left: 0px;
}
/*====== drop down 5 =========*/


/*====== drop down 6 =========*/
.animatesd-dw {
    display: block;
    visibility: hidden;
    opacity: 0;
}
.dropdown-here:hover .animatesd-dw{
    visibility: visible;
    opacity: 1;
}
/*====== drop down 6 =========*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.