Menu dropdown is aligned to the right

Question

I have created a Wordpress website using Elementor live builder and some plain CSS and I have this weird looking dropdown menu now which I'm unable to fix. Here's the HTML source code:

                <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>

Here's how it looks like on my screen:

Basically I want the drop down text to be on the gray background. I tried using the following CSS and it didn't work:

.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;
}

You can see the website for yourself here: www.boazb.co.il

Please let me know if you have any suggestions.

Thanks!

Answer 1

give

left:0!important

to the elementor-sub-item

Answer 2

Please try below CSS.

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

Answer 3

You have a following css rule, may in your custom css.

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

Second attribute of this rule "right: auto!important" is contributing to the problem. You will need to remove that. And additionally, in the following css rule you will need to add "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; } 

Above css rule is defined in "frontend-rtl.min.css" css of the elementor plugin. Following is URL of this stylesheet. http://boazb.co.il/wp-content/plugins/elementor-pro/assets/css/frontend-rtl.min.css?ver=2.1.10

Its always better to avoid using "!important" in css rules. Though, some may have different opinion about it.

Following screenshot is for your reference as how your sub-menu will look after this fix.