三级导航项目脱离屏幕而不包装

Question

以下是网站：https://trovarebusinesssolutions.com

如果您在“解决方案”下查看并悬停在“客户关系管理”()上，子菜单( Management )将从屏幕上飞出(取决于屏幕大小)。有没有办法让它从另一个方向飞出去，呆在屏幕上，落在下面，或者别的什么？

我使用Wordpress 4.1与Impreza主题。

我正在考虑将所有辅助菜单的宽度限制在125 on，并将单词包装起来，但我似乎无法让它发挥作用: CSS：

.l-header .w-nav-list.level_2, .l-header .w-nav-list.level_3, .l-header .w-nav-list.level_4 {
    background-color: #1a3869;
    max-width: 125px;
    white-space: normal;
    word-wrap: break-word;
    display: table;
    float: left;
    height: auto;
}

HTML：

<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_sublevel w-nav-item level_1 menu-item-48 togglable"><a class="w-nav-anchor level_1" href="https://trovarebusinesssolutions.com/solutions/"><span class="w-nav-title">Solutions</span><span class="w-nav-arrow"></span></a>
<ul class="w-nav-list level_2" style="opacity: 0; display: none;">
    <li id="menu-item-94" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has_sublevel w-nav-item level_2 menu-item-94 togglable"><a class="w-nav-anchor level_2" href="https://trovarebusinesssolutions.com/solutions/microsoft-dynamics-crm/"><span class="w-nav-title">Customer Relationship Management</span><span class="w-nav-arrow"></span></a>
    <ul class="w-nav-list level_3" style="opacity: 0; display: none;">
        <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_3 menu-item-33"><a class="w-nav-anchor level_3" href="https://trovarebusinesssolutions.com/solutions/microsoft-dynamics-crm/"><span class="w-nav-title">Microsoft Dynamics CRM</span><span class="w-nav-arrow"></span></a>       </li>
    </ul>
    </li>
    <li id="menu-item-95" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has_sublevel w-nav-item level_2 menu-item-95 togglable"><a class="w-nav-anchor level_2" href="https://trovarebusinesssolutions.com/solutions/click-dimensions/"><span class="w-nav-title">Marketing Automation</span><span class="w-nav-arrow"></span></a>
    <ul class="w-nav-list level_3" style="opacity: 0; display: none;">
        <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_3 menu-item-49"><a class="w-nav-anchor level_3" href="https://trovarebusinesssolutions.com/solutions/click-dimensions/"><span class="w-nav-title">Click Dimensions</span><span class="w-nav-arrow"></span></a>       </li>
    </ul>
    </li>
</ul>
</li>

提前感谢您的帮助！

Answer 1

开发人员在他们的网站上为我回答了这个问题。他们有一个css类.左转，使菜单转到另一边.

Answer 2

如果要限制宽度：

.level_2, .level_3 {
    max-width: 125px;
}