菜單下拉菜單右對齊

Question

我已經使用Elementor live Builder和一些普通的CSS創建了一個Wordpress網站，但現在有了這個看起來很奇怪的下拉菜單，無法修復。 這是HTML源代碼：

                <div data-id="13382b6f" class="elementor-element elementor-element-13382b6f elementor-nav-menu__align-center elementor-nav-menu--stretch elementor-nav-menu--indicator-chevron elementor-nav-menu__text-align-center elementor-nav-menu--dropdown-tablet elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu" data-settings="{&quot;full_width&quot;:&quot;stretch&quot;,&quot;layout&quot;:&quot;horizontal&quot;,&quot;toggle&quot;:&quot;burger&quot;}" data-element_type="nav-menu.default">
                <div class="elementor-widget-container">
                        <nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-grow"><ul id="menu-1-13382b6f" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-18"><a href="http://boazb.co.il/" class="elementor-item  elementor-item-active">דף  בית</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://boazb.co.il/about/" class="elementor-item">אודות</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://boazb.co.il/books/" class="elementor-item">ספרים</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"><a href="http://boazb.co.il/articles/" class="elementor-item">מאמרים</a>
<ul class="sub-menu elementor-nav-menu--dropdown">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://boazb.co.il/building/" class="elementor-sub-item">תכנון ובנייה</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-207"><a href="http://boazb.co.il/disassembly/" class="elementor-sub-item">קניין ופירוק שיתוף</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://boazb.co.il/assessment/" class="elementor-sub-item">שמאות ומקרקעין</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://boazb.co.il/asset/" class="elementor-sub-item">מיסוי מקרקעין</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://boazb.co.il/authority/" class="elementor-sub-item">רשות מקרקעי ישראל</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-38"><a href="http://boazb.co.il/verdict/" class="elementor-item">פסקי דין</a>
<ul class="sub-menu elementor-nav-menu--dropdown">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443"><a href="http://boazb.co.il/tax/" class="elementor-sub-item">החלטות ערר מס שבח</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444"><a href="http://boazb.co.il/court/" class="elementor-sub-item">פסקי דין בתי המשפט</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://boazb.co.il/international/" class="elementor-item">פרסומים בינלאומיים</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-37"><a href="http://boazb.co.il/students/" class="elementor-item">סטודנטים</a>
<ul class="sub-menu elementor-nav-menu--dropdown">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://boazb.co.il/university/" class="elementor-sub-item">אוניברסיטאות</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://boazb.co.il/college/" class="elementor-sub-item">מכללות</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://boazb.co.il/contact/" class="elementor-item">צרו קשר</a></li>
</ul></nav>
                    <div class="elementor-menu-toggle">
            <i class="eicon" aria-hidden="true"></i>
        </div>
        <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container"><ul id="menu-2-13382b6f" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-7 current_page_item menu-item-18"><a href="http://boazb.co.il/" class="elementor-item  elementor-item-active">דף  בית</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://boazb.co.il/about/" class="elementor-item">אודות</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://boazb.co.il/books/" class="elementor-item">ספרים</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"><a href="http://boazb.co.il/articles/" class="elementor-item">מאמרים</a>
<ul class="sub-menu elementor-nav-menu--dropdown">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://boazb.co.il/building/" class="elementor-sub-item">תכנון ובנייה</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-207"><a href="http://boazb.co.il/disassembly/" class="elementor-sub-item">קניין ופירוק שיתוף</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://boazb.co.il/assessment/" class="elementor-sub-item">שמאות ומקרקעין</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://boazb.co.il/asset/" class="elementor-sub-item">מיסוי מקרקעין</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://boazb.co.il/authority/" class="elementor-sub-item">רשות מקרקעי ישראל</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-38"><a href="http://boazb.co.il/verdict/" class="elementor-item">פסקי דין</a>
<ul class="sub-menu elementor-nav-menu--dropdown">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443"><a href="http://boazb.co.il/tax/" class="elementor-sub-item">החלטות ערר מס שבח</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444"><a href="http://boazb.co.il/court/" class="elementor-sub-item">פסקי דין בתי המשפט</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://boazb.co.il/international/" class="elementor-item">פרסומים בינלאומיים</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-37"><a href="http://boazb.co.il/students/" class="elementor-item">סטודנטים</a>
<ul class="sub-menu elementor-nav-menu--dropdown">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://boazb.co.il/university/" class="elementor-sub-item">אוניברסיטאות</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://boazb.co.il/college/" class="elementor-sub-item">מכללות</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://boazb.co.il/contact/" class="elementor-item">צרו קשר</a></li>
</ul></nav>
                </div>
                </div>
                        </div>
            </div>
        </div>

這是我的屏幕上的樣子：

基本上，我希望下拉文本在灰色背景上。 我嘗試使用以下CSS，但無法正常工作：

.elementor-nav-menu > li > ul {
left: 50%!important;
right: auto!important;
transform: translateX(-50%)!important;
}

.elementor-nav-menu > li > ul a {
justify-content: center!important;
}

您可以在這里查看自己的網站： www.boazb.co.il

如果您有任何建議，請告訴我。

謝謝！

Answer 1

給

left:0!important

到elementor-sub-item

Answer 2

請嘗試以下CSS。

.elementor-sub-item {
    left: 0 !important;
    right: auto !important;
    font-size: 18px !important;
}

Answer 3

您有以下css規則，可能在您的自定義css中。

 .elementor-sub-item { left: 50%!important; right: auto!important; font-size: 18px !important; } 

該規則的第二個屬性“正確：自動！重要”正在導致該問題。 您將需要刪除它。 另外，在以下CSS規則中，您需要添加“ right：0px;”

 ul.elementor-nav-menu--dropdown a, ul.elementor-nav-menu--dropdown a:focus, ul.elementor-nav-menu--dropdown a:hover { text-shadow: none; border-right: 8px solid transparent; } 

上面的css規則是在elementor插件的“ frontend-rtl.min.css” css中定義的。 以下是此樣式表的URL。 http://boazb.co.il/wp-content/plugins/elementor-pro/assets/css/frontend-rtl.min.css?ver=2.1.10

始終最好避免在CSS規則中使用“！important”。 雖然，有些人對此有不同的看法。

以下屏幕截圖僅供您參考，以作為完成此修復后子菜單的外觀。