如何更正代码以使其具有带有子菜单和第二个关联子菜单的水平下拉导航栏？

Question

受网上示例的启发，为了在平板电脑上导航，我试图开发一个Boostrap导航栏，如：

-----------   -----------   -----------                         
| NavOption |   NavOption  |   NavOption       
-----------   -----------   ----------- 
            | Submenu1  | 
             ----------- 
            | Submenu2 |
            |    ▼     |
             -----------
            | Submenu2.1| 
             -----------
            | Submenu2.2| 
             -----------
            | Submenu3  | 
             -----------

在纵向方向上，我想要获得的是像下面这样的boostrap导航栏，始终以文本表示形式：

            ----------- 
           | NavOption | 
            ----------- 
           | Submenu1  | 
            ----------- 
           | Submenu2  |
           |    ▼      |
            -----------
           | Submenu2.1| 
            -----------
           | Submenu2.2| 
            -----------
           | Submenu3  | 
            -----------
           | NavOption | 
            -----------
           | NavOption |  
            -----------

但是，通过单击子菜单2来展开第二个关联的子菜单（2.1和2.2），则不会显示任何内容： 以下链接上有代码：https://jsfiddle.net/d0hLogc9/