Question

我正在使用Word主题的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”（＆gt;）。

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/

我可以让Fusion Mega菜单中的子菜单仅在悬停时显示吗？

1 个答案: