Dropdown Menu

// html code
===========================================

<div class="main-menu floatright">
	<ul id="nav">
		<li><a href="">Home</a></li>
		<li><a href="">About Me</a></li>
		<li><a href="">Portfolio <span class="caret"></span></a>
			<ul class="dropdown">
				<li><a href="">Dropdown Item</a></li>
				<li><a href="">Dropdown Item <span class="caret"></span></a>
					<ul class="dropdown">
						<li><a href="">Another Dropdown</a></li>
						<li><a href="">Another Dropdown</a></li>
						<li><a href="">Another Dropdown</a></li>
						<li><a href="">Another Dropdown</a></li>
					</ul>
				</li>
				<li><a href="">Dropdown Item</a></li>
			</ul>
		</li>
		<li><a href="">Contact Me</a></li>
		<li><a href="">Footer</a></li>
	</ul>
</div>



/*css code*/
=============================================
.main-menu  ul  li {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.main-menu ul  li {
    float: left;
    padding: 4px 0;
	
}
.main-menu ul  li  a {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 15px;
    text-transform: uppercase;
}
.main-menu ul li:hover {
    background: red;
    transition: all 0.5s ease 0s;
}
.main-menu ul li:hover ul li a{
    color:#fff;
}

/*Dropdown menu*/
ul li{
	position:relative;
}
ul  li  ul.dropdown {
  background: red none repeat scroll 0 0;
  position: absolute;
  width: 200px;
  top:56px;
  display:none;
}
ul li:hover ul.dropdown {
	display:block;
}
ul li ul.dropdown li a{
	font-size:14px;
}
ul li ul.dropdown li:hover {
	background:orange;
}
ul li ul.dropdown li{
	border-top:1px solid #a1a1a1;
	width:100%;
}
ul li ul.dropdown li:first-child{
	border-top:none;
}

/*second level menu*/

ul li ul.dropdown li ul.dropdown{
	display:none;
	top:0px;
}
ul li ul.dropdown li:hover ul.dropdown{
	left:100%;
	display:block;
}
ul li ul.dropdown li ul.dropdown li{}