Drop down menu css下拉菜单第三级问题

我有第二级的下拉菜单
这是我的代码
如何将代码更改为3级菜单？
我的语言是从右向左的
我试图增加3级，但它显示在第二级 我需要为3级添加什么

        <div class="menu">
            <ul>
                <li><a href="index.php">home</a></li>

                <li><a href="help.php">help</a></li>

                <li><a href="help.php">visa</a>
                              <ul>
                                    <li><a href="#">Cozy Couch</a></li>
                                    <li><a href="#">Great Table</a></li>
                                    <li><a href="#">3rd</a><ul><li><a href="#">test 3rd</a></li></ul></li>
                             </ul>

                </li>

                 <li><a href="faq.php">faq</a></li>
                <li><a href="contact-us.php">contact us</a></li>


            </ul>
        </div>

---

您可能需要相对于第二个级别定位第三个级别，并设置

top

和

left

CSS属性

另外，如今，多级菜单也有点不受欢迎。它们很难使用，特别是对于移动/触摸屏用户（不是说不可能正确使用，而是很难）。我相信现在首选的解决方案是大菜单，它传达了更多的信息，但仍然隐藏起来，以便在需要时调用

如果不是选择的答案，我希望你至少觉得这些建议很有帮助

.menu
{
    width:1000px;
    height:40px;

    direction:rtl;
    overflow:hidden;
    padding-top:7px;
}

.menu ul
{
      margin: 0;
    padding: 0;
    list-style: none;
    float:right;
    font-family:tahoma;
    font-size:11px;
}

.menu ul li
{
    display: block;
    position: relative;
    float: right;

}
.menu li ul {
    display: none;
        float:right;
}
.menu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;

    padding: 5px 15px 5px 15px;

    margin-left: 1px;
    white-space: nowrap;
}
.menu ul li a:hover {
background: #3b3b3b;
}
.menu li:hover ul {
    display: block;
    position: absolute;
}

    .menu li:hover li {
        float: none;
    font-size: 11px;
}
.menu li:hover a { background: #3b3b3b; }
.menu li:hover li a:hover {
    background: #1e7c9a;
}