Question

我在侧边栏上工作，滑出并有两个级别。我有第一级滑出，然后有一个链接滑出另一个级别，进一步推出第一级。因此，当两个级别打开时，我最终得到2个240px宽度的菜单占用了480px的屏幕。

我可以将2个级别滑出。我遇到的问题是我无法让第一级超出第二级，并且它一直被它覆盖。

小提琴＆gt; http://jsfiddle.net/ciaranhan/328n22sL/

HTML

 <ul class="menu menu-vertical menu-right" id="menu-s2">
 <li><button id="showRight2">Share</button></li> 
 <ul class="menu menu-vertical menu-right2" id="menu-s1"> 
   <li><a href="#">Email</a></li>
   <li><a href="#">FB</a></li>
   <li><a href="#">Twitter</a></li>
   <li><a href="#">Google+</a></li>
 </ul>
</ul>
<button id="showRight">Show/Hide Right Slide Menu</button>

CSS

.menu-right {
    right: -240px;
}

.menu-right.menu-open {
    right: 0px;
}

.menu-right2 {
    right: -240px;
}

.menu-right2.menu-open {
    right: 0px;
}

我尝试使用此行将第一级推出超出第二级但实际上是推出第二级而不是第一级。

.menu-right2.menu-open .menu-right2.menu-open {
right: 480px;   
}

有谁知道如何将第一级目标定为480px而不是第二级？

还可以查看here

幻灯片菜单有2个级别

0 个答案: