Выпадающее меню выровнено по правому краю

Question

Я создал веб-сайт Wordpress с использованием живого компоновщика Elementor и небольшого простого CSS-кода, и теперь у меня есть это странное выпадающее меню, которое я не могу исправить.Вот исходный код 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

Пожалуйста, попробуйте ниже CSS.

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

Answer 2

У вас есть следующее правило 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 определено в "frontend-rtl.min.css" css плагина elementor.Ниже приводится URL этой таблицы стилей.http://boazb.co.il/wp-content/plugins/elementor-pro/assets/css/frontend-rtl.min.css?ver=2.1.10

Всегда лучше избегать использования "! Important" в правилах CSS.Тем не менее, у некоторых может быть другое мнение по этому поводу.

Следующий скриншот для справки, как ваше подменю будет выглядеть после этого исправления.

Answer 3

дать

left:0!important

элементу-элементу