0

我有二级下拉菜单
这是我的代码
如何将我的代码更改为 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>

它的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;
}
4

1 回答 1

0

您可能需要相对于第二级定位第三级并设置top和leftCSS 属性。

或者，这些天来，多层次的菜单有些不受欢迎。它们很难使用，尤其是对于移动/触摸屏用户（不是说不可能正确，而是很难）。我相信这些天首选的解决方案是大型菜单，它传达更多信息，但仍然隐藏起来以便在需要时调用。

如果不是选定的答案，我希望您至少会发现这些建议对您有所帮助。

于 2013-07-22T12:57:48.713 回答