Question

我有一个菜单，将在asp.net页面中自动创建。我正在尝试使用纯CSS跨浏览器菜单，但我如何设置它以便每个后续子节点都是自动调整/显示，而不必为菜单的每个级别定义样式。

这是使用css实现此目的的唯一方法吗？

基本上我正在寻找一种方法来使用css来显示/隐藏子菜单项，而无需为每个级别定义样式 - 特别是因为我不知道会有多少级别。

Answer 1

你应该能够只通过指定第二级来实现它

<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
    <li>test1
        <ul class="mnusub">
            <li>test2</li>
            <li>test11
                <ul class="mnusub">
                    <li>test3</li>
                    <li>test4</li>
                    <li>test5</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>test5
        <ul class="mnusub">
            <li>test6</li>
            <li>test7</li>
            <li>test8</li>
        </ul>
    </li>
    <li>test9</li>
    <li>test10</li>
</ul>
</body>
</html>

这里的关键是“＆gt;”选择器，因为它指定直接后代而不是子后代

享受

Answer 2

如果你想影响每个孩子单独，但没有必须为每个孩子制定样式规则，那么你需要更多的逻辑，CSS不会提供。你可以使用像PHP这样的逻辑，或者你可以使用Javascript / jQuery。在这种情况下，您可以通过jQuery在子项[x]上切换CSS类，而您只需要设置这些类的样式。那么哪个孩子上课并不重要，它会相应地设计。请注意，首先应确保您的菜单至少在没有Javascript的情况下可用，因此用户不会依赖它。

如何创建跨浏览器的css菜单，不需要为菜单的每个级别提供样式

2 个答案: