Как добавить эффект слайда вправо в выпадающее меню?

Question

Я пишу выпадающее меню, используя семантический интерфейс.Проблема в том, что я хотел бы, чтобы эффект «сдвиг вправо» раскрылся в «данных» и «банках данных и банках данных», потому что, когда я нажимаю на него, мне приходится прокручивать панель для просмотра выпадающего меню.Я полагаю, что нужно добавить CSS и JS, но я не знаю, куда мне подать руку, может кто-нибудь мне помочь?

мой HTML

<div class="ui centered grid">
    <div class="computer only row">
        <div class="center aligned column">
            <div class="ui compact menu">
                <a class="item">Mission</a>
                <div class="ui pointing dropdown link item">
        Dati
                     <i class="dropdown icon"></i>
                    <div class="ui menu">
                     <div class="item">Abitanti<br> capoluogo<br> e                                         provincia</div>
                     <div class="item">Spostamento</div>
                </div>
                </div>
                <a class="item">Media</a>           
                <div class="ui pointing dropdown link item">
                SW e banche dati
                     <i class="dropdown icon"></i>
                    <div class="ui menu">
                     <div class="item">AffiSoft</div>
                     <div class="item">Outviewer</div>
                        <div class="item">Lime</div>
                </div>
                </div>              

                <a class="item">Certificazioni</a>
                <a class="item">100% insourcing</a>
                <a class="item">Contatti</a>
            </div>

        </div>

    </div>

     <div class="tablet mobile only row">
        <div class="column">
            <div class="ui menu">
                <a id="mobile_item" class="item"><i class="bars icon"></i></a>
            </div>
        </div>
    </div>

</div>

  </div>
<div class="ui pushable segment">
        <div class="ui sidebar vertical menu">
            <a class="item">Mission</a>
             <div class="ui simple dropdown item">
    <i class="dropdown icon"></i>
    Dati
    <div class="menu">
      <div class="item">Abitanti capoluogo e provincia</div>
      <div class="item">Spostamento</div>
    </div>
  </div>
            <a class="item">Media</a>
            <a class="item">SW e banche dati</a>
            <a class="item">Certificazioni</a>
            <a class="item">100% insourcing</a>
            <a class="item">Contatti</a>
        </div>

</div>

мой CSS

#content {
        min-height: 100px;
        }
.ui.grid{
        padding: 10px !important;
        }
.pushable.segment{
        margin: 0 !important;
        }

мой JS

$('.ui.sidebar').sidebar({
    context: $('.ui.pushable.segment'),
    transition: 'overlay'
}).sidebar('attach events', '#mobile_item');
$('.ui.dropdown')
  .dropdown();

Я ожидаю увидеть внутри адаптивного меню,потому что в размере монитора он работает нормально.