Troubleshooting my cascading menu

Dear all,
I am new to css and have faced a problem with my website menu appearance.
The problem is that when I hover over a menu item that has a sub-menu, its sub-menu does not open in a separate block in front of its parent. Instead, the sub-menu items open in the same block as their parent’s and replace the parent item. What I want is to have every sub-menu appear in a separate block in front of its parent item.
Please note that y website has rtl content. So, I want the sub-menu to appear on the left of its parent item.
Lots of thanks in advance for your kind helping hand.
Here is the CSS code related to my menu appearance taken from style.css file of my template:

/* =Menu
--------------------------------------------------------------*/
#main-nav {
	border: 1px solid #439f55;
	cursor: pointer;
	background: #57ad68;
	color: #fff;
	position: relative;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}
#main-nav li {
	float: left;
	position: relative;
	padding: 0;
}
#main-nav a {
	color: #fff;
	display: block;
	float: left;
	font-size: 22px;
	padding: 8px 12px 0 10px;
	height: 32px;
}
#main-nav a:hover,#main-nav ul li.current-menu-item a,#main-nav ul li.current_page_ancestor a,#main-nav ul li.current-menu-ancestor a,#main-nav ul li.current_page_item a,#main-nav ul li:hover > a {
	background: #439f55;
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	color: #fff;
}
#main-nav ul ul {
	text-shadow: none;
}
#main-nav li:hover > a,#main-nav ul ul :hover > a,#main-nav a:focus {
	color: #439f55;
}
/* Dropdown */
#main-nav ul li ul,
#main-nav ul li:hover ul ul,
#main-nav ul ul li:hover ul ul,
#main-nav ul ul ul li:hover ul ul,
#main-nav ul ul ul ul li:hover ul ul {
	display: none;
	z-index: 9999;
}
#main-nav ul li:hover ul,
#main-nav ul ul li:hover ul,
#main-nav ul ul ul li:hover ul,
#main-nav ul ul ul ul li:hover ul,
#main-nav ul ul ul ul ul li:hover ul  {
	display: block;
}
#main-nav ul li ul {
	position: absolute;
	background-color: #fff;
	border-bottom: 4px solid #439f55;
	top: 40px;
	left: 0px;
	width: 190px;
}
#main-nav ul li ul li {
	float: none;
	border-bottom: 1px solid #EAEAEA;
	border-left: 1px solid #EAEAEA;
	border-right: 1px solid #EAEAEA;
	padding: 0;
}
#main-nav ul li ul li a,
#main-nav ul li.current-menu-item ul li a,
#main-nav ul li ul li.current-menu-item a,
#main-nav ul li.current_page_ancestor ul li a,
#main-nav ul li.current-menu-ancestor ul li a,
#main-nav ul li.current_page_item ul li a {
	float: none;
	line-height: 21px;
	font-size: 13px;
	font-weight: normal;
	height: 100%;
	padding: 6px 10px;
	color: #777;
	text-transform: capitalize;
	background: #fff;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#main-nav ul li.current_page_item ul li a {
	background: #fff;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#main-nav ul li.current_page_item a {
	border: none;
}
#main-nav ul li ul li a:hover,#main-nav ul li ul li:hover > a,#main-nav ul li.current-menu-item ul li a:hover {
	background-color: #F9F9F9;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #439f55;
}
#main-nav ul li ul li ul {
	left: 188px;
	top: 0px;
}
#main-nav select {
	display: none;
}
.default-menu {
    display: none;
}

/* =Featured Slider
--------------------------------------------------------------*/