创建一个三级 css 手风琴菜单答案

【问题标题】：creating a three level css accordion menu创建一个三级 css 手风琴菜单
【发布时间】：2013-12-13 21:25:24
【问题描述】：

我创建了一个两级 CSS 手风琴菜单see here。我现在正在尝试创建第三个级别。我对图层的css嵌套略有了解。下面的例子是我认为应该的。有谁知道正确的嵌套方法。

#main-nav li ul a:hover:before, .subMenu li ul a:hover:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: rgba(0,0,0,0.75);
    border: 1px solid #FFF;
    position: absolute;
    top: 0.5em;
    left: -0.75em;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

【问题讨论】：

它们在鼠标悬停时打开，对吗？我可以试试#main-nav li:hover > ul
是的，它们在鼠标悬停时打开
好吧，选择器说：如果我在#main-nav 中并且我正在处理一个列表项，给我ul，它是直接的孩子。然后你可以显示/隐藏
@Tim 对不起，我不太明白，你能用 jsFiddle 演示一下吗
我将其发布为答案。如果我能澄清一下，请告诉我。

标签： css html css-transitions

【解决方案1】：

这是一个粗略的概念证明，作为嵌套悬停的“从第一原则”方法：

http://jsfiddle.net/6X9NR/1/

 <ul id="main-nav">
    <li><a href="#">1.1</a>
        <ul>
            <li><a href="#">1.1.1</a>
                <ul>
                    <li><a href="#">1.1.1.1</a></li>
                    <li><a href="#">1.1.1.2</a></li>
                </ul>
            </li>
            <li><a href="#">1.1.2</a>
                <ul>
                    <li><a href="#">1.1.2.1</a></li>
                    <li><a href="#">1.1.2.2</a></li>
                </ul>            
            </li>
        </ul>
    </li>
    <li><a href="#">1.2</a></li>
</ul>

CSS：

#main-nav ul {display:none}
#main-nav li:hover > ul {display: block}

主要部分是最后一个选择器。它说应该显示任何ul，它是悬停在上面的li 的直接子代。

第一个选择器隐藏所有子菜单。

就像基本功能一样简单。修改后，如果您愿意，这应该适用于任意位置更改和 css 转换。

【讨论】：

【解决方案2】：

首先你好，你有这个属性：

溢出：隐藏

这隐藏了你的形状，只让视觉作为箭头，但隐藏到子菜单。您可能需要找到只绘制箭头的形状。

你也在设置

#main-nav ul li {
  position:relative;
}

去掉这个，子子菜单可以是上一个菜单的100%height。

在这个选择器上：

 #main-nav li:hover  ul

添加> 只影响#main-nav li 的直接子ul 而不是里面的所有ul：

#main-nav li:hover > ul

演示http://plnkr.co/edit/WAZplAWxzLieRZh1jNMa?p=preview

编辑

您可以在这里查看如何获取right arrow shape，查看这个新的Demo

【讨论】：

【解决方案3】：

尝试在第 61 行更改溢出（或删除它）：

#main-nav li ul, .subMenu li:hover ul {overflow:hidden;}

要确保在锚点悬停时左箭头溢出，只需在 CSS“style.css”的第 71 行添加溢出：隐藏到 taht 锚点

#main-nav li ul a, .subMenu li ul a {overflow:hidden;}

还从您的 li 元素中删除相对位置，以将子 ul 与父 ul 顶部对齐因为您在第 41 行有一个边框顶部，所以您必须添加它，以便从顶部对齐所有 3 个 ul：

#main-nav ul ul ul {top:-1px}

希望我没有忘记任何事情。无论如何，你的问题只是溢出:) 其他的只是表面上的改变

【讨论】：