親アイテムとナビメニューを調整

Question

ウェブサイトのリンク：http://mattarlaw.com/ar 私は多言語のウェブサイトで作業しています。問題は、右から左への言語であるアラビア語で作業するときです。 ナビゲーションメニューが各親項目の右下に揃っていません。 ホバー上にナビメニューが表示されます。 画像は下記の問題と私が達成したい結果を説明します。newtheme_arab.cssに

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

 
      .mean-nav .arMenu { 
 
     \t color: #fff; 
 
     \t 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"> 
 
\t <header> 
 
\t \t <nav> 
 
\t \t \t <ul id="menu-header" class="menu"> 
 
\t \t \t \t <li id="menu-item-776" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-776"> 
 
\t \t \t \t \t <a href="http://mattarlaw.com/ar/%d8%a7%d9%84%d9%85%d9%83%d8%aa%d8%a8/"> 
 
\t \t \t \t \t \t <div class="arMenu">المكتب</div> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <ul class="sub-menu"> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t <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> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t </header> 
 
</div>

おかげ

Answer 1

を次の操作を行います。

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 
}