Question

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

和它; s 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;
}

Answer 1

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

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

如果不是选定的答案，我希望您至少能够找到有用的建议。

问题与css下拉菜单第三级

1 个答案: