语义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。这篇文章可能会有所帮助：http://css-tricks.com/popping-hidden-overflow。

另一种选择可能是使用手风琴来保持侧边栏内的所有内容。