align nav menu with its parent item

Question

website link is: http://mattarlaw.com/ar I am working on a multilingual website. The problem is when working with the Arabic language which is a Right to Left language. The nav menu is not aligned to the bottom right of each parent item. The nav menu appears upon hover. The image below explains the problem and the result that I would like to achieve:

 header nav{
         clear: both;
         margin-left: 0px; 
         float: right;
        }
     

            .mean-nav .arMenu {
        	color: #fff;
        	text-align: right;
        }
        header nav ul{
         margin: 0;
         padding: 0;
         list-style: none; 
        }
         
        header nav ul li{
         float: right;
         margin: 0px 5px;
         position: relative;
         padding: 0;
        }
        
        header nav ul li a{
         text-align: center;
         width: 100%; 
         padding: 6px;
         display: block;
         text-decoration: none;
         font-size: 13px;
         color: #8a191b;  
         transition: ease-in-out all .2s;
         -moz-transition: ease-in-out all .2s;
         -webkit-transition: ease-in-out all .2s; 
        }
         
        header nav ul li a:hover{ 
         color: #000;
         transition: ease-in-out all .2s;
         -moz-transition: ease-in-out all .2s;
         -webkit-transition: ease-in-out all .2s;
         text-decoration: none;
        }
         
         
        header nav ul ul { /* this targets all sub main-navs */
         display: none; /* hide all sub main-navs from view */
         position: absolute;
         z-index: 9999;
         padding-top: 14px;
         margin: 0;
         margin-left: 0;
         padding-left: 0;
        
        }
         
        
        header nav ul ul li { /* this targets all submain-nav items */
         width: auto; /* set to the width you want your sub main-navs to be. This needs to match the value we set below */
         float: none;
         /*min-width: 100px; */
         white-space: nowrap;
         margin: 0; 
         padding: 0; 
         display: block; 
         border-bottom: 1px solid #fff;
        }
        
        header nav ul ul li a  { 
         font-size: 12px;
         font-weight: normal; 
         color: #fff;
         text-align: right;
         height: 26px;
         line-height: 26px;
         background-image: none;
         text-decoration: none;
         border: 0; 
         padding: 0px 5px; 
         background: #8a191b;
         opacity: 1;
         border: none; 
         box-shadow: none; 
        }

<div class="nav">
	<header>
		<nav>
			<ul id="menu-header" class="menu">
				<li id="menu-item-776" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-776">
					<a href="http://mattarlaw.com/ar/%d8%a7%d9%84%d9%85%d9%83%d8%aa%d8%a8/">
						<div class="arMenu">المكتب</div>
					</a>
					<ul class="sub-menu">
						<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://mattarlaw.com/ar/%d9%85%d8%ad%d8%a7%d9%85%d9%88%d9%86-%d9%81%d9%8a-%d9%84%d8%a8%d9%86%d8%a7%d9%86-%d8%aa%d8%b9%d8%b1%d9%8a%d9%81/">من نحن</a></li>
						<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a href="http://mattarlaw.com/ar/%d9%85%d8%ad%d8%a7%d9%85%d9%8a-%d9%84%d8%a8%d9%86%d8%a7%d9%86-%d9%85%d8%a8%d8%a7%d8%af%d8%a4%d9%86%d8%a7/">مبادؤنا</a></li>
						<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mattarlaw.com/ar/%d9%85%d8%ad%d8%a7%d9%85%d9%88%d9%86-%d9%84%d8%a8%d9%86%d8%a7%d9%86-%d8%a7%d9%84%d9%82%d8%b6%d8%a7%d9%8a%d8%a7/">القضايا</a></li>
						<li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118"><a href="http://mattarlaw.com/ar/nominations-awards/">الجوائز والتسميات</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
</div>

Thanks

Answer 1

in newtheme_arab.css do this :

header nav ul ul {
    display: none;
    position: absolute;
    z-index: 9999;
    //padding-top: 14px; remove this line 
    margin: 0;
    margin-left: 0;
    padding-left: 0;
    right: 5px; //add this line
}