html - 如何通过自定义 CSS 更改阿拉伯语 RTL 下拉子菜单的方向？

Question

我们有一个自定义电子商务网站，下面是类别列表的代码，它是一个下拉菜单。

<div  id="nav-header" class="nav-header navbar-default">
    <div class="container ">
        <div class="row">
            <nav class="ms-mb-0" role="navigation">
                <div class="col-sm-3 col-md-3">
                    <!--navheader sidebar categories on home page-->
                    <div class="  hover-dropdown dropdown vertical-megamenu navheader-sidebar-category  ">
                        <div class="ms-br-zero dropdown-toggle btn-primary" type="button"
                             id="dropdownMenu1" data-toggle="dropdown">
                            <div id="menu-icon">
                                {{'SHOP BY CATEGORIES'|msTranslate}}
                                &nbsp;<i class="fa fa-bars pull-right ms-pt-xs"></i>
                            </div>
                        </div>
                        <ul
                                class="list-group nav-ul-color  dropdown-menu ms-br-zero ms-br-none ms-pt-0 ms-pb-0 ms-mt-0 ms-w-full ms-z-index20 ms-pos-absolute"
                                role="menu" aria-labelledby="dropdownMenu1" aria-expanded="true"
                                data-ng-init="show={}">
                            <li class="list-group-item ms-br-zero  level1" role="presentation "
                                data-ng-repeat="category in navigation.header.links">
                                <a href="{{category.url}}" class="ms-p-0 ms-ws-normal"
                                   title="{{category.title|msTranslate}}">
                                    {{category.title}}
                                    <span data-ng-if="category.children.length ">
                <i class="fa fa-angle-right pull-right">
                </i>
              </span>
                                </a>
                                <ul  ng-if="category.children.length" class="list-unstyled level2 vertical"
                                    ng-style="{'column-count':{{getcount(category)}}}">
                                    <div  class=" ms-p-xs dropdownMenu-lvl2">
                                        <div  class="dropdownMenu-lvl3  ms-pr-xs ms-lh-25 ms-mb-s "
                                             ng-repeat="subcategory in category.children">
                                            <a href="{{subcategory.url}}"
                                               title="{{subcategory.title|msTranslate}}">
                                                {{subcategory.title}}
                                                &nbsp;
                                                <i ng-if="subcategory.children.length"
                                                   class="fa fa-caret-left">
                                                </i>
                                            </a>
                                            <ul class="list-unstyled level3"
                                                ng-if="subcategory.children.length">
                                                <li ng-repeat="subcategory2 in subcategory.children"
                                                    class="subcategory2  ">
                                                    <a href="{{subcategory2.url}}"
                                                       title="{{subcategory2.title}}"
                                                       class="level3-links ">
                                                        {{subcategory2.title}}
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li class="list-group-item ms-br-zero  level1" role="presentation ">
                                <a href="/allcategories" class="ms-p-0 ms-ws-normal"
                                   title="{{'SEE ALL CATEGORIES'|msTranslate}}">
                                    {{'SEE ALL CATEGORIES'|msTranslate}}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

如果语言是英语，则子类别显示在右侧，如下所示：

但是，如果语言是阿拉伯语，则子类别会显示在右侧，这是错误的，因为它从屏幕溢出：

对于阿拉伯语，菜单应显示在屏幕左侧。

我在自定义 CSS 中尝试了以下操作，但阿拉伯语菜单仍然没有显示在左侧：

body  .dropdownMenu1.dropdownMenu-lvl2,
body  .dropdownMenu-lvl2.dropdownMenu-lvl3 {left:-250px !important;}

如何更正代码以使阿拉伯语菜单显示在左侧。

标签： htmlcss