Question

我尝试使用CSS在下拉菜单中添加第二级。它是不变的要求当悬停在触发器文本上时菜单复杂显示，第一级（选项＆gt;＆gt;＆gt;，菜单X）看起来不错，但无论如何我做了什么，我无法阻止选项级别（选项X等）显示在顶层。我需要这些选项在悬停在选项＆gt;＆gt;＆gt;上时显示在一边。我还没有包含第二级CSS代码而不是其中之一我尝试过的所有事情都已接近工作，所以我不确定是什么甚至包括。

<!DOCTYPE html>
<html lang="en">
<head>

<style type="text/css">

.menu {
    width: 150px;
    position: relative;
}

.menu * {
    display:block; 
    padding:0; margin:0;
}

.menu ul {
    display:none;
}

.menu:hover ul {
    display:block;  
    position:absolute;
    width:100%;
    top:100%;
    border:solid 1px black;
    background: white;
    }

    .menu li a {
        font-size: 14px;
        font-family: arial, sans-serif;
        font-weight: bold;
        padding:15px 0px 15px 15px;   
    color: white;
    background-color: black;
    text-decoration: none;   
}

.menu a:hover {
    background-color: white;
    color: black;
}


</style>

</head>

<body>
<div class='menu'>
        <span class='triggerclass' style='width:150px'>Trigger</span>   
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href='#'>Options &nbsp;&nbsp;&gt;&gt;&gt;</a>
                <ul>
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
    </div>
</body>
</html>

Answer 1

我相信你要找的是一个弹出式菜单。网上有很多教程只用CSS来完成。

这是我在您的问题下面的评论中链接到的jsFiddle中添加到您的代码中的CSS。

<强> CSS

.menu li {
    position: relative;
}
.menu:hover li:hover ul {
    display: block;
    position: absolute;
    left: 150px;
    top: 0;
}

您发布的代码无法正常工作的原因主要有几个原因，而这些原因使CSS弹出菜单工作正常。

首先，包含子菜单的li应设置position: relative，因为该子菜单将使用position: absolute。这使您可以在使用绝对定位时根据文档中li的位置定位子菜单。

完成此操作后，根据父li定位子菜单。将top: 0; left: 0;用于子菜单会将其左上角置于父li左上角的左上角。虽然这会将子菜单的顶部与父li的顶部对齐，但它会隐藏子菜单。要解决此问题，请将子菜单移至父li，left: 150px的宽度。

其次，当li包含菜单的li:hover ul与.menu:hover li:hover > ul一起悬停时，您需要显示子菜单。

关于它。

如果您不习惯使用CSS position property，这可能会有点混乱。

希望这有帮助！

<强> **编辑**

OP询问如何将子菜单显示仅包含在单个子菜单中，以便不显示子菜单（等等）的子菜单。很简单，请使用Child Selector。

<强> CSS

{{1}}

请参阅更新后的jsFiddle。

Answer 2

查看您的代码或知道究竟什么不起作用将非常有帮助。

预警：这段代码看起来相当复杂，并且有一些移动部件，但是一旦你有了它，添加新的菜单，子菜单和“超级”子菜单就很容易了 - 所有你需要做的就是添加一个无序列表和分配适当的类。真的很容易复杂的部分是jQuery rememebring，超级菜单目前正在展示并管理当人们将鼠标移动到整个地方时会发生什么。

也就是说，尝试这个想法：在每个菜单“section”中显示第一个列表元素，并在其下面设置所有其他列表元素以显示：none。为它们提供特定的类，并设置顶部元素的悬停以显示其他列表元素。如果需要“第三”图层，请创建一个完全隐藏的SEPARATE列表。将SEPARATE类添加到将触发第三层显示的“子菜单”项，然后为第二层的悬停添加一个事件处理程序，以显示第三层。很难解释，但这是一个例子：

HTML：

<div style="display:table-cell; margin:auto; border:none;" runat="server" id="divMenu">
    <ul class="MainMenu">
        <li class="MainMenu NoSuperSub">ES</li>
        <li class="MainMenu SubMenu Link NoSuperSub" data-url="WebPage.aspx" style="display:none;">Go To A Page</li>
        <li class="MainMenu SubMenu SubWithSub" data-menu="AnotherMenu" style="display:none;">Open Another Menu</li>
    </ul>
</div>


<ul class="MainMenu SuperSubMenu" id="AnotherMenu" style="display:none; margin:auto; border:none;">
    <li class="MainMenu SubMenu Link SuperSubMenu" data-url="WebPage.aspx" style="display:none;">Another WebPage</li>
</ul>

使用Javascript：

 //Global Variables

        var SuperSubMenuName;
        var CurrentMenu;
        var TopPosition;
        var LeftPosition;
        var ViewingSuperSubMenu = false;
        var SetTimeOutFunction;

        //Event Handlers

        $("li.MainMenu").mouseover(function (e) {
            $(this).css("display", "inline-block");
            $(this).siblings().css("display", "inline-block");
        });

        $("ul.MainMenu").mouseout(function (e) {
            $(this).children("li").each(function () {
                if ($(this).prop("class").toString().indexOf("SubMenu") >= 0)
                    $(this).css("display", "none");
            });
        });

        $(".Link").click(function (e) {
            $("#PostBackURL").val($(this).data("url"));
            $("#PostBackValue").val("MenuSelection");
            $("#aspnetForm").submit();
        });

        $("li.SubWithSub").mouseover(function (e) {
            HideSuperSubMenu();
            CurrentMenu = $(this).parent("ul").parent("div");
            position = getPosition(this);
            TopPosition = position.y - 108 ;
            LeftPosition = position.x + 117;
            SuperSubMenuName = "#" + $(this).data("menu");
            ShowSuperSubMenu();
            ViewingSuperSubMenu = false;
            clearTimeout(SetTimeOutFunction);
            SetTimeOutFunction = setTimeout(HideSuperSubMenuIfNotViewing, 1000);
        });

        $("ul.SuperSubMenu").mouseover(function (e) {
            CurrentMenu.children("ul").children("li").each(function () {
                $(this).css("display", "inline-block");
            });
            ViewingSuperSubMenu = true;
        });

        $("ul.SuperSubMenu").mouseout(function (e) {
            CurrentMenu.children("ul").children("li").each(function () {
                if ($(this).prop("class").toString().indexOf("SubMenu") >= 0)
                    $(this).css("display", "none");
            });
            ViewingSuperSubMenu = false;
        });

        $("li.NoSuperSub").mouseover(function (e) {
            HideSuperSubMenu();
        });

        //Functions

        function ShowSuperSubMenu(){
            $(SuperSubMenuName).css({top: TopPosition, left: LeftPosition, position: "absolute"});
            $(SuperSubMenuName).css("display", "table-cell");
            $(SuperSubMenuName).children("li").each(function () {
                $(this).css("display", "inline-block");
            });
        }

        function HideSuperSubMenu() {
            $(SuperSubMenuName).css("display", "none");
            $(SuperSubMenuName).children("li").each(function () {
                $(this).css("display", "none");
            });
        }

        function HideSuperSubMenuIfNotViewing() {
            if (ViewingSuperSubMenu == false)
                HideSuperSubMenu();
        }

        function getPosition(element) {
            var xPosition = 0;
            var yPosition = 0;

            while (element) {
                xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                element = element.offsetParent;
            }
            return { x: xPosition, y: yPosition };
        }

无法获得CSS / html下拉菜单的第二级功能

2 个答案: