Question

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

如果您查看解决方案并将鼠标悬停在客户关系管理上，子菜单（MS Dynamics CRM）将从屏幕上飞出（取决于屏幕大小）。有没有什么方法可以让它从另一个方向飞出来，留在屏幕上，下拉或其他东西？

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

我正在考虑在所有二级菜单上将宽度限制为125px，并将文字换行，但我似乎无法让它工作： 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类.drop-left使菜单走另一条路。

第三级导航项目关闭屏幕而不是包装

2 个答案: