Html 简单的；Sub-Sub"；选项

我创建了一个带有两级子菜单的简单导航。我正在寻找“sub-sub”选项，以显示在其父对象的右侧，而不是下方。我非常感谢您对CSS的任何帮助。下面是html和css以及JS fiddle链接

提前谢谢大家,

HTML

---

您只需在

主导航ul li:hover>ul

上调整几个样式即可

.main-nav ul ul li:hover > ul {
  position: absolute;
  top: 0;
  left: 100%;
}

这会将其设置为父对象的100%左侧，并与父对象的顶部内联

---

本论坛上支持的质量和速度从未停止让人惊讶。这是一个完美的解决方案。谢谢DavidPaulJunior！嘿，PSL，谢谢你的回复，是的，最终结果正是我想要的。我应该在我的第一个问题中提到这一点，但我希望找到一种解决方案，它不需要手动将类添加到“sub-sub”选项中，因为这些菜单是在WP中动态生成的。DavidPaulJunior提出的解决方案工作得非常理想，因为不需要额外的类。谢谢你：）

ul, li{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } 

.nav-bar {
    background: #008752;
    height: 50px;
    box-shadow: 2px 2px 3px #333;   
}

.main-nav ul, .main-nav li{
    display: inline
}

.main-nav a {
    padding: 0 20px 0 20px;
    text-decoration: none;
    line-height: 50px;
    color: white;
    display: block;
}

.main-nav a:hover {
    background:#00FFFB;
    color: black;   
}


.main-nav ul li {
    position: relative; 
    float: left;
}

.main-nav ul ul {
    position: absolute;
    top: -99999px;
    left: 0;
    opacity: 0; 
    background: #037A5A;
    text-align: left;
    box-shadow: 2px 2px 3px #BFBFBF;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;

}

.main-nav ul ul a {
    width: 135px;
    line-height: 40px;
    padding: 0 20px;
    display:block;  
}

.main-nav ul li:hover > ul {
    position: absolute;
    top: 100%;
    opacity: 1;
    z-index: 99999;
}

.main-nav ul ul ul {
    background:#830002; 
    text-align: left;
}

.main-nav ul ul ul a {
    width: 135px;
    line-height: 40px;
    padding: 0 20px;
    display: block; 
}

.main-nav ul ul ul a:hover {
    background:#1041A3;
    color: white;
}   

.main-nav ul ul li:hover > ul {
    position: absolute;
    top: 100%;
    left: 170px;
}

.main-nav ul ul li:hover > ul {
  position: absolute;
  top: 0;
  left: 100%;
}