Question

我有一个相关的询问to this question。这解决了我正在考虑解决的问题。

我在项目中使用这个水平菜单。它现在运行良好但是当它悬停时它出现在背景上，因此在表单上显示其他组件。下图是我的意思的一个例子。如何在悬停而不是出现在背面时覆盖这些组件？

代码

<template name="HeaderLayout">
    <div class="container">
            <header class="clearfix">
                <!--<span>School Congress</span>-->
                <h1>School Management System</h1>

            </header>   
            <div class="main">
                <nav id="cbp-hrmenu" class="cbp-hrmenu">
                    <ul>
                        <li>
                            <a href="#">Products</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Downloads</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Education &amp; Learning</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Applications</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                        </ul>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Projects</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Freeware</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <script>
            var cbpHorizontalMenu = (function () {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on("mouseover", a);
        b.on("mouseover", function (h) {
            h.stopPropagation()
        })
    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("click", e)
        }
        return false
    }

    function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    }
})();

$(function () {
    cbpHorizontalMenu.init();
});
        </script>
</template>

Answer 1

也许您需要在样式表中添加此CSS规则：

.cbp-hrsub {
    z-index:300;
}

如果你没有样式表，试着把它放在头脑中

<style>
    .cbp-hrsub {
         z-index:300;
    }
</style>

制作菜单显示在前面而不是背景上

1 个答案: