Divi下拉菜单变为水平而非垂直

Question

我无法在website上使下拉菜单垂直显示，而不是像现在这样水平显示。您可以在网络控制台中看到CSS。

这是令人反感的代码：

<li id="menu-item-40250" class="mega-menu our-apps-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-40250 mega-menu-parent mega-menu-parent-3"><a href="#">Our Apps</a>
<ul class="sub-menu" style="max-height: 681.014px; overflow: hidden auto;">
    <li id="menu-item-40255" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40255"><a href="https://bytestand.com/bytestand-3/">ByteStand</a></li>
    <li id="menu-item-40256" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40256"><a href="https://bytestand.com/fba-shipping/">FBA Shipping</a></li>
    <li id="menu-item-40257" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40257"><a href="https://bytestand.com/freshcredit/">FreshCredit</a></li>
</ul>
</li>

This again is my website here.

我在哪里迷路了？

Answer 1

没有CSS真的很难理解正在发生的事情...但是CSS的问题是您的<li>元素具有一个float: left属性，可以从DOM流中提取它们（例如他们绝对定位）。

如果您摆脱掉下拉列表成为垂直的规则，那么最好还是改写错误的规则，而不是改正错误的规则

检查员说它来自

#top-menu li.mega-menu ul li @ style.css？ver = 3.0.80：11

这是我发现的规则：

#top-menu li.mega-menu ul li {
    display: block!important;
    /* float: left!important; <-- get rid of this */
    margin: 0;
    padding: 0!important;
}

Chrome检查器获得的结果

Answer 2

在您的deviceHeigth and项中（将鼠标悬停在主导航菜单项上时显示的项）：

ul

希望这会有所帮助。

Answer 3

以下CSS代码将轻松解决此问题。

.sub-menu{
   display: flex;
   flex-direction: column;
}

Answer 4

要实现所需的功能，您必须删除一些我用黄色标记突出显示的样式。

注意：请检查它是否不影响网站的其他部分

之后添加此CSS

.sub-menu{
    display: flex;
    flex-direction: column;
    max-width: 184px !important;  //As few of your styles overriding this part so I have added !important their
}