创建三级css手风琴菜单

我创建了一个两级CSS手风琴菜单see here。我现在试图尝试创建第三个层次。我对图层的css嵌套有轻微的自己。下面的例子是我假设它应该是。有谁知道正确的嵌套方法。创建三级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); 
}

来源

2013-12-13 NewBoy

他们在鼠标悬停打开，右我可能会尝试'#main？ -nav li：hover> ul' –

是啊他们o笔在鼠标悬停 – NewBoy

好吧，选择器说：如果我在'＃main-nav'，我喜欢列表项目，给我'ul'是直接的孩子。你可以然后为显示/隐藏 –

嗨首先在你有这样的属性：

溢出：隐藏

隐藏你的形状，并只让视觉如箭，但隐藏在subsubmenu。您可能需要找到只绘制箭头的形状。

而且要设置

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

删除此与subsubmenu可以是一级菜单的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

来源

2013-12-13 13:11:34 DaniP

这里是概念的一个粗略的证明作为 '从第一原理' 的方式嵌套徘徊：

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转换，如果你愿意。

来源

2013-12-13 13:09:34

试试这行61变化溢出（或删除）：

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

确保溢出在锚点悬停的左箭头只是添加溢出：隐藏在你的CSS“风格的71行锚点。CSS”

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

也从李elemnts删除相对位置，从父UL 的顶部对齐孩子UL的becouse你有41行的无边框，顶部，你就必须添加此，调整所有3 UL的从顶部：

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

希望我没有忘记什么反正你的问题只是溢出:)其他的东西都只是表面的改变

来源

2013-12-13 13:14:40 nomak22

创建三级css手风琴菜单

回答

相关问题