PyroCMS CSS styling to emulate Bootstrap Dropdown

PyroCMS CSS styling to emulate Bootstrap Dropdown.css

/* Dropdown */

#main-nav ul ul {
left: -25px;
padding: 0;
position: absolute;
top: 45px;
visibility:hidden;
}
#main-nav ul ul ul {
left: 150px;
padding: 0;
position: absolute;
top: 0px;
visibility:hidden;
}
#main-nav li:hover > ul {
visibility:visible;
}
#main-nav ul ul li { float: none; }

#main-nav ul ul a {
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	text-align:left !important;
	width:120px;
	border-bottom:1px solid #555;
	background:#444;
	border-radius:0px;

}

#main-nav ul ul a:hover, #main-nav ul ul .hover > a, #main-nav ul ul .current > a, #main-nav ul ul .current > a:hover {
	color: #fff;
	text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.2);
	border-bottom-color:#353535;
	border-bottom-color:#353535;
}

#main-nav ul li.current > a:after {
	content: '';
	position: absolute;
	left:50%;
	top: 100%;
	margin-left:-5px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #659a22;

}
#main-nav ul li ul li:first-child > a:after {
	content: '';
	position: absolute;
	left:24%;
	top: 0%;
	margin-left:-5px;
	margin-top:-6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}
#main-nav ul li ul li:first-child > a:hover:after {
	border-bottom-color:#9ac92c;


}
#main-nav ul li.current ul li:first-child > a:after {
	content: '';
	position: absolute;
	left:24%;
	top: 0%;
	margin-left:-5px;
	margin-top:-6px;
	border-left: none;
	border-right: none;
	border-bottom: none;

}
#main-nav ul li ul li ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: -1px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #444;

}
#main-nav ul li ul li ul li:first-child > a:hover:after {
	border-bottom-color: transparent;
	border-right-color:#7daf27;
}
nav select { display: none; }

@media (min-width: 768px) and (max-width: 980px) {
		#main-nav ul ul ul {left: 120px;}
	}

/* Portrait tablet to landscape and desktop*/
@media (min-width: 980px) and (max-width: 1200px) {
	#main-nav ul ul ul {left: 140px;}	
}