如何垂直显示父菜单，子菜单ul水平显示

Question

我想要一个导航，我的主菜单或父链接像侧栏一样垂直显示，当点击其中一些时，他们的子菜单应该在不同的位置水平显示！那可能吗？ 实际上我通过在主页上做一个垂直菜单来实现这一点，当点击从它们的链接进入新页面时，我这次水平创建了第二个导航，但现在我不想这样，因为它产生了问题在由ajax加载页面时的链接的活动状态。 任何类型的解决方案都欢迎使用jquery 这是示例代码。

<nav>
<ul>
    <li><a href="#Menu 1">Menu 1</a>
        <ul>
            <li><a href="#SubMenu 1.1">SubMenu 1.1</a></li>
            <li><a href="#SubMenu 1.2">SubMenu 1.2</a></li>
            <li><a href="#SubMenu 1.3">SubMenu 1.3</a></li>
            <li><a href="#SubMenu 1.4">SubMenu 1.4</a></li>
            <li><a href="#SubMenu 1.5">SubMenu 1.5</a></li>
            <li><a href="#SubMenu 1.6">SubMenu 1.6</a></li>
            <li><a href="#SubMenu 1.7">SubMenu 1.7</a></li>
            <li><a href="#SubMenu 1.8">SubMenu 1.8</a></li>
            <li><a href="#SubMenu 1.9">SubMenu 1.9</a></li>
            <li><a href="#SubMenu 1.10">SubMenu 1.10</a></li>
            <li><a href="#SubMenu 1.11">SubMenu 1.11</a></li>
            <li><a href="#SubMenu 1.12">SubMenu 1.12</a></li>
        </ul>
    </li>
    </ul>
    </nav>

这是我在第一时间做的镜头。

现在我也希望我的导航完全相同，但这次只有一个导航，如上所述。感谢