更改移动导航中的子菜单显示

Question

我希望移动子菜单项始终显示，而不必单击它们以查看子菜单内的内容。我不确定这个问题的解决办法是什么......

目前移动用户只看到主菜单项。他们必须点击带有子项目的项目才能进入子菜单。

主要1 主要2＆gt;
主3 主要4＆gt;
主要5

我希望它是这样的：

主要1 主要2＆gt;
subItem 1
subItem 2
subItem 3
主3 主要4＆gt;
subItem 1
subItem 2
subItem 3
主要5

这是我的库存基础菜单的codepen文件。 http://codepen.io/anon/pen/lgoer

这是菜单的基本结构。

<nav class="top-bar" data-topbar>
    <ul class="title-area">

        <li class="name">
            <h1><a href="#">Top Bar Title</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
    <section class="top-bar-section">

        <ul class="right">
            <li class="has-dropdown">
            <a href="#">Main Item 1</a>
                <ul class="dropdown">
                    <li><label>Section Name</label></li>
                    <li class="has-dropdown">
                    <a href="#" class="">Has Dropdown, Level 1</a>
                        <ul class="dropdown">
                            <li><a href="#">Dropdown Options</a></li>
                            <li><a href="#">Dropdown Options</a></li>
                            <li><a href="#">Level 2</a></li>
                            <li><a href="#">Subdropdown Option</a></li>
                            <li><a href="#">Subdropdown Option</a></li>
                            <li><a href="#">Subdropdown Option</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Dropdown Option</a></li>
                    <li><a href="#">Dropdown Option</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

我该怎么做？