Семантический интерфейс боковой панели и раскрывающееся меню

Question

Я пытаюсь создать простую веб-ui с семантическим ui.

Я хочу, чтобы боковая панель с меню в ней в некоторых элементах имела подэлементы ... Разве не должно быть такого жесткого hu?

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

Это комбинация положения: фиксированное и переполнение на .ui.sidebar. Эта статья может помочь: http://css-tricks.com/popping-hidden-overflow.

Альтернативой может быть использование аккордеона, чтобы держать все в боковой панели.

Answer 2

если боковая панель настроена на использование overlay перехода она может быть исправлена ​​путем указания

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

взято отсюда http://jsfiddle.net/59174tt1/2/