как изменить категорию справа налево в этом меню

Question

Я пишу арабский язык в этом меню CSS3, но я problème в направлении

взгляд на это изображение, пожалуйста: http://im83.gulfup.com/ZMFYxg.png

так что мне нужно изменить направление подкатегория «справа налево»

так как может зафиксировано, что подкатегория в левой помощи мне пожалуйста

 #cssmenu, 
 
     #cssmenu ul, 
 
     #cssmenu ul li, 
 
     #cssmenu ul li a, 
 
     #cssmenu #menu-button { 
 
     margin: 0; 
 
     padding: 0; 
 
     border: 0; 
 
     list-style: none; 
 
     line-height: 1; 
 
     display: block; 
 
     position: relative; 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
     } 
 
     #cssmenu:after, 
 
     #cssmenu > ul:after { 
 
     content: "."; 
 
     display: block; 
 
     clear: both; 
 
     visibility: hidden; 
 
     line-height: 0; 
 
     height: 0; 
 
     } 
 
     #cssmenu #menu-button { 
 
     display: none; 
 
     } 
 
     #cssmenu { 
 
     width: auto; 
 
     font-family:"chakirHelve",sans-serif; 
 
     line-height: 1; 
 
     background: #31b0d5; 
 
     } 
 
     #cssmenu > ul > li { 
 
     float: right; 
 
     border-left:1px solid #79cee5; 
 
     } 
 
     #cssmenu > ul > li:hover { 
 
     background: #57c2e0; 
 
     } 
 
     #cssmenu.align-center > ul { 
 
     font-size: 0; 
 
     text-align: center; 
 
     } 
 
     #cssmenu.align-center > ul > li { 
 
     display: inline-block; 
 
     float: none; 
 
    } 
 
    #cssmenu.align-center ul ul { 
 
     text-align: left; 
 
    } 
 
    #cssmenu.align-right > ul > li { 
 
     float: right; 
 
    } 
 
    #cssmenu.align-right ul ul { 
 
     text-align: right; 
 
    } 
 
    #cssmenu > ul > li > a { 
 
     padding: 15px; 
 
     font-size: 15px; 
 
     text-decoration: none; 
 
     text-transform: uppercase; 
 
     color: white; 
 
     -webkit-transition: color .2s ease; 
 
     -moz-transition: color .2s ease; 
 
     -ms-transition: color .2s ease; 
 
     -o-transition: color .2s ease; 
 
     transition: color .2s ease; 
 
    } 
 
    #cssmenu > ul > li:hover > a, 
 
    #cssmenu > ul > li.active > a { 
 
     color: white; 
 
    } 
 
    
 
    #cssmenu ul ul { 
 
     position: absolute; 
 
     left: -9999px; 
 
    } 
 
    #cssmenu li:hover > ul { 
 
     left: auto; 
 
    } 
 
    #cssmenu.align-right li:hover > ul { 
 
     right: 0; 
 
    } 
 
    #cssmenu ul ul ul { 
 
     margin-left: 100%; 
 
     top: 0; 
 
    } 
 
    #cssmenu.align-right ul ul ul { 
 
     margin-left: 0; 
 
     margin-left: 100%; 
 
    } 
 
    #cssmenu ul ul li { 
 
     height: 0; 
 
     -webkit-transition: height .2s ease; 
 
     -moz-transition: height .2s ease; 
 
     -ms-transition: height .2s ease; 
 
     -o-transition: height .2s ease; 
 
     transition: height .2s ease; 
 
    } 
 
    #cssmenu ul li:hover > ul > li { 
 
     height: 32px; 
 
    } 
 
    #cssmenu ul ul li a { 
 
     padding: 20px 20px; 
 
     width: 160px; 
 
     font-size: 12px; 
 
     background: #31b0d5; 
 
     text-decoration: none; 
 
     float:left; 
 
     
 
     color: white; 
 
     -webkit-transition: color .2s ease; 
 
     -moz-transition: color .2s ease; 
 
     -ms-transition: color .2s ease; 
 
     -o-transition: color .2s ease; 
 
     transition: color .2s ease; 
 
    } 
 
    #cssmenu ul ul li:hover > a, 
 
    #cssmenu ul ul li a:hover { 
 
     color: #ffffff; 
 
    } 
 
    #cssmenu ul ul li.has-sub > a { 
 
     color:white; 
 
     text-align: right; 
 
    } 
 
    #cssmenu ul ul li.has-sub > a::after { 
 
     position: absolute; 
 
     top: 22px; 
 
     left: 10px; 
 
     width: 4px; 
 
     height: 4px; 
 
     border-bottom: 1px solid #dddddd; 
 
     border-left: 1px solid #dddddd; 
 
     content: ""; 
 
     text-align: right; 
 
    
 
    } 
 
    #cssmenu.align-right ul ul li.has-sub > a::after { 
 
     right: auto; 
 
     left: 10px; 
 
     border-bottom: 0; 
 
     border-right: 0; 
 
     border-top: 1px solid #dddddd; 
 
     border-left: 1px solid #dddddd; 
 
    } 
 
    #cssmenu ul ul li.has-sub:hover > a::after { 
 
     border-color: #ffffff; 
 
    }

и этот HTML код

 <div id='cssmenu'> 
 
<ul> 
 
    <li><a href='#'>الرئيسية</a></li> 
 
    <li class='active has-sub'><a href='#'> 
 
     <span class='rgt'>جميع المشاريع </span> 
 
     </a> 
 
     <ul> 
 
     <li class='has-sub'><a href='#'>جميع المشاريع</a> 
 
      <ul> 
 
       <li><a href='#'>subcategory</a></li> 
 
       <li><a href='#'>subcategory</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class='has-sub'><a href='#'>إعلانات</a> 
 
      <ul> 
 
       <li><a href='#'>subcategory</a></li> 
 
       <li><a href='#'>subcategory</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul>  
 
    </li> 
 
    <li><a href='#'>إعلانات حديثة </a></li> 
 
    <li><a href='#'>مشاريع جديدة </a></li> 
 
    <li><a href='#'>الإعلانات المدفوعة </a></li> 
 
    <li><a href='#'>راسلنا</a></li> 
 
</ul>  
 
</div>

так как может зафиксировано, что подкатегорию в левом

помощь мне, пожалуйста

Answer 1

Try это, он будет работать. Существует некоторые изменения:
http://jsfiddle.net/sherali/n6nrLgg9/10/ или http://jsfiddle.net/sherali/n6nrLgg9/10/show/

ОБНОВЛЕНО:

поставил class="align-right" класс HTML (где id="cssmenu" есть).

CSS изменения:

#cssmenu li:hover > ul { 
    left: auto; 
    z-index:2;//have added 
} 
#cssmenu ul ul li.has-sub{ 
    position: relative;//has added 
} 
#cssmenu ul ul ul { 
    margin-left: 160px;//old version 100% 
    top: 0; 
} 
#cssmenu.align-right ul ul ul { 
    margin-left: 0; 
    margin-right: 160px;//old version: margin-left: 100%; 
} 
#cssmenu ul li:hover > ul > li { 
    height: auto;//old version: 32px 
}