如何使 Fusion Mega Menu 中的子菜单仅在悬停时显示？

Question

我正在为 Wordpress 使用 Fusion 主题，并尝试匹配旧网站上的大型菜单。如果你看看生产：

Production site

您可以通过将鼠标悬停在“专业知识”和“家庭和个人”上来查看我想要的内容 - 子菜单显示在右侧，并带有行分隔符。

现在看看开发：

Development site

当您将鼠标悬停在“专业知识”上时，您会看到所有子菜单都显示出来，这使得大型菜单容器过长。

我 99.9% 确定我将不得不编写一些 JQuery 来使菜单悬停部分工作，但是我如何设置该菜单的样式以使子菜单以它在生产中的方式显示？

很遗憾，我无法发布代码，因为样式表很大，而且主题开发人员在其中散布了菜单内容。

有任何提示、建议或想法吗？

添加评论/问题：我编写了一些 JQuery 以使项目根据需要显示/隐藏，但我无法让子菜单以我想要的方式显示。我已经尝试了第一个答案中给出的内容，但它对我不起作用。我可以将子菜单推到右侧，所以我知道我的 CSS 正在选择正确的节点，但我不能，例如，让列表样式消失，所以没有箭头。关于如何匹配这两个菜单的任何想法？

Answer 1

我不熟悉“Fusion”主题，但是通过查看代码，似乎原始主题的 CSS 与您的 CSS 之间存在很大差异，而且看起来还有一些 js 需要例如，在您的下拉菜单上运行以将“左”和“高度”值添加到“子菜单”类。

你的“子菜单”类设置为position: relative;，而它需要设置为position: absolute;，还有更多需要更改，但我想让它更容易，所以我做了一个类似的活生生的例子。

一般来说，您可以为每个 'ul' 元素（level1、level2、each.）使用 class，而不是像我一样通过“direct child” (>) 进行选择。

HTML：

<div class="dropdown">
    <ul>
        <li>
            <a href="#">level1-link1</a>
        </li>
        <li>
            <a href="#">level1-link2</a>
            <ul>
                <li>
                    <a href="#">level2-link1</a>
                </li>
                <li>
                    <a href="#">level2-link2</a>
                    <ul>
                        <li>
                            <a href="#">level3-link1</a>
                        </li>
                        <li>
                            <a href="#">level3-link2</a>
                            <ul>
                                <li>
                                    <a href="#">level4-link1</a>
                                </li>
                                <li>
                                    <a href="#">level4-link2</a>
                                </li>
                            </ul>    
                        </li>
                    </ul>    
                </li>
            </ul>    
        </li>
        <li>
            <a href="#">level1-link3</a>
        </li>
        <li>
            <a href="#">level1-link4</a>
        </li>
        <div class="clear"></div>
    </ul>
    <div class="white_layer"></div>
</div>    
<img src="http://dev.icsandbox.com/wp-content/uploads/2015/01/Home_CloselyHeld-opt.jpg" />

CSS：

.dropdown, .dropdown > ul > li
{
    position: relative;
}

.white_layer
{
    width: 100%;
    height: 200px;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.76);
    display: none;
}

.show .white_layer
{
    display: block;
}

.dropdown > ul
{
    padding: 0 20px;
}

.dropdown > ul > li
{
    float: left;
    margin-left: 20px;  
    text-transform: uppercase;
}

.dropdown > ul > li li
{
    text-transform: lowercase;
}

.dropdown > ul > li:first-child
{
    margin-left: 0px;    
}

.dropdown li:hover > ul
{
    display: block;
}

.dropdown > ul > li > ul ul
{
    border-left: 1px solid #888;
}

.dropdown > ul > li > a
{
    display: block;
    padding: 20px 10px;
}

.dropdown > ul > li a
{
    display: inline-block;
    padding: 10px 0;
}

.dropdown > ul ul
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    display: none;
}

.dropdown > ul > li > ul
{
    width: 200px;
    height: 400%;
    top: 100%;
    left: 0;
}

.dropdown > ul > li > ul ul
{
    height: 100%;
}

.dropdown > ul > li > ul ul li
{
    padding: 0 30px;
}

JQuery:

$(document).ready(function(){
    $('.dropdown li').hover(function(){
        if ($(this).children('ul').length > 0){    
            $('.dropdown').addClass('show');
        }
    }, function(){
        if ($('.dropdown > ul > li ul').css('display') != 'block'){ 
            $('.dropdown').removeClass('show');
        }   
    });
});

实时示例：http://jsfiddle.net/rnkLoo4x/