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”。不过，有些人可能对此有不同的看法。

下面的屏幕快照仅供您参考，以帮助您查看子菜单在解决此问题后的样子。

菜单下拉菜单右对齐

3 个答案: