Jquery 带有两个子菜单的HTML菜单

我有一个html菜单，其中一个子菜单是用元素的鼠标悬停打开的。此菜单的代码为：

<li class='has-sub'><a href="" id="A3" style="width: 190px;" class="usernav">Tab Amministrativo <span class="caret"></span></a>
   <ul>
      <li><a class="navbar-text" href="/Admin/Pages/example1.aspx">example1</a></li>
      <li><a class="navbar-text" href="/Admin/Pages/example2.aspx">example2</a></li>
      <li><a class="navbar-text" href="/Admin/Pages/example3.aspx">example3</a></li> 
    </ul>
</li>

现在，我需要向代码中添加另一个子菜单，该子菜单必须在特定值的右侧或底部可见。例如，我需要展示这样一个解决方案：

   <li class='has-sub'><a href="" id="A3" style="width: 190px;" class="usernav">Tab Amministrativo <span class="caret"></span></a>
       <ul>
          <li>example1
             <ul>
                <li><a class="navbar-text" href="/Admin/Pages/exampleSub1.aspx">exampleSub1</a></li>
             </ul>
          </li>
          <li><a class="navbar-text" href="/Admin/Pages/example2.aspx">example2</a></li>
          <li><a class="navbar-text" href="/Admin/Pages/example3.aspx">example3</a></li> 
        </ul>
    </li>

例1

这是JSFIDLE：我希望“Fatture Esterne”有子标签“Crea Fatture”和“Fat2”

编辑 您可以将此添加到CSS中

#cssmenu >ul li.has-sub ul li.has-sub-lateral ul{
  display:none;
}
#cssmenu >ul li.has-sub ul li.has-sub-lateral a:hover + ul {
  display:block;
  margin-left:250px;

}

---

我不知道这是否是你需要的。但是如果把

边距放在左边（因为你有一个绝对位置），你可以看到
请提供一个jsfiddle，任何人都可以更容易地帮助你解决你的问题你的代码不适合我。你能编辑我的小提琴吗？
#cssmenu >ul li.has-sub ul li.has-sub-lateral ul{
  display:none;
}
#cssmenu >ul li.has-sub ul li.has-sub-lateral a:hover + ul {
  display:block;
  margin-left:250px;

}