Question

我创建了一个两级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);
}

Answer 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的{{1}}都是li的直接孩子，应该会显示出来。

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

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

Answer 2

首先，你有这个属性：

溢出：隐藏

隐藏你的形状，只让视觉像箭头一样，但隐藏在子子菜单中。您可能需要找到仅绘制箭头的形状。

你也在设置

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

删除它，子菜单可以是上一个菜单的100％height。

在这个选择器上：

 #main-nav li:hover  ul

添加>只会影响ul的直接子#main-nav li，而不会影响内部的所有内容：

#main-nav li:hover > ul

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

修改的

您可以在此处查看如何获取right arrow shape，查看新的 Demo

Answer 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与父元素的顶部对齐因为你在第41行有一个边框顶部，你必须添加它，以便从顶部对齐所有3个ul：

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

希望我没有忘记任何事情。无论如何你的问题只是溢出:)其他的东西只是化妆品的变化

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

3 个答案: