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

Question

我正在为 Wordpress 使用 Fusion 主题并尝试匹配旧站点上的大型菜单。如果您查看生产:

Production site

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

现在看看开发:

Development site

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

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

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

有什么提示、建议或想法吗？

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

Answer 1

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

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

一般来说，您可以为每个“ul”元素(level1、level2，每个)使用类，而不是像我一样通过“直接子元素”(>) 选择。

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/