如何在此菜单中从右向左更改类别

Question

我在这个CSS3菜单中写阿拉伯语，但我的方向有问题

请看这张图片：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

试试这个，它会起作用。有一些变化：
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
}