第三级导航项离开屏幕并且不换行

Question

这是网站：https://trovarebusinesssolutions.com

如果您在“解决方案”下查看并将鼠标悬停在“客户关系管理”上，子菜单 (MS Dynamics CRM) 将飞出屏幕（取决于屏幕尺寸）。有什么方法可以让它以另一种方式飞出，停留在屏幕上，下拉到下方，或其他方式吗？

我正在使用带有 Impreza 主题的 Wordpress 4.1。

我正在考虑将所有二级菜单的宽度限制为 125 像素并让文字换行，但我似乎无法让它工作： 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

如果要限制宽度：

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

Answer 2

开发人员在他们的网站上为我回答了这个问题。他们有一个 css class .drop-left 使菜单向另一方向移动。

第三级导航项离开屏幕并且不换行

Third level navigation items going off screen and not wrapping

navigation

word-wrap