语义UI侧边栏和下拉菜单

Question

我试图用语义ui创建一个简单的web ui.

我想要一个带有菜单的侧边栏,在某些项目中会有子项目......难道不应该那么辛苦吗？

http://jsfiddle.net/ycm8ctfx/

<div class="ui vertical menu sidebar teal">
   <div class="menu">
   <a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
     Example
   </a>
   <div class="ui left pointing dropdown link item">
      <i class="dropdown icon"></i>
      Messages
     <div class="menu">

如何使子项在正常页面内容上"跳出"侧边栏？如果单击示例中的"消息",将显示菜单(观察底部的滚动条以显示),但由于这些是侧边栏的子项,因此它们将显示在侧边栏中.但我希望他们能够超越正常的内容!我没有通过摆弄z-index来使它工作.

Answer 1

如果侧栏配置为使用overlay转换,则可以通过指定来修复

.ui.sidebar {
    overflow: visible !important;
}

取自这里http://jsfiddle.net/59174tt1/2/

Answer 2

它是.ui.sidebar 上position:fixed 和overflow 的组合。本文可能会有所帮助： http: //css-tricks.com/popping-hidden-overflow。

另一种方法可能是使用手风琴将所有内容保留在侧边栏中。