title: align nav menu with its parent item
body: <p>website link is: <a href="http://mattarlaw.com/ar" rel="nofollow noreferrer">http://mattarlaw.com/ar</a>
  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:
  <a href="https://i.stack.imgur.com/xKvOh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xKvOh.png" alt="A sample of the problem"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 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; 
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
   &lt;header&gt;
    &lt;nav&gt;
     &lt;ul id="menu-header" class="menu"&gt;
      &lt;li id="menu-item-776" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-776"&gt;
       &lt;a href="http://mattarlaw.com/ar/%d8%a7%d9%84%d9%85%d9%83%d8%aa%d8%a8/"&gt;
        &lt;div class="arMenu"&gt;المكتب&lt;/div&gt;
       &lt;/a&gt;
       &lt;ul class="sub-menu"&gt;
        &lt;li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"&gt;&lt;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/"&gt;من نحن&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"&gt;&lt;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/"&gt;مبادؤنا&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"&gt;&lt;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/"&gt;القضايا&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118"&gt;&lt;a href="http://mattarlaw.com/ar/nominations-awards/"&gt;الجوائز والتسميات&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/header&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>