纯CSS多级下拉菜单

Question

以前，我没有对多级纯CSS下拉菜单进行过很多工作，但是现在我正在寻找最干净的方法。当我搜索了这个网上我发现了很多那名4-5岁的解决方案，我不知道是否有更好的方法来实现这一目标，而不是做一些这样的。

Answer 1

.third-level-menu

{

    position: absolute;

    top: 0;

    right: -150px;

    width: 150px;

    list-style: none;

    padding: 0;

    margin: 0;

    display: none;

}



.third-level-menu > li

{

    height: 30px;

    background: #999999;

}

.third-level-menu > li:hover { background: #CCCCCC; }



.second-level-menu

{

    position: absolute;

    top: 30px;

    left: 0;

    width: 150px;

    list-style: none;

    padding: 0;

    margin: 0;

    display: none;

}



.second-level-menu > li

{

    position: relative;

    height: 30px;

    background: #999999;

}

.second-level-menu > li:hover { background: #CCCCCC; }



.top-level-menu

{

    list-style: none;

    padding: 0;

    margin: 0;

}



.top-level-menu > li

{

    position: relative;

    float: left;

    height: 30px;

    width: 150px;

    background: #999999;

}

.top-level-menu > li:hover { background: #CCCCCC; }



.top-level-menu li:hover > ul

{

    /* On hover, display the next level's menu */

    display: inline;

}





/* Menu Link Styles */



.top-level-menu a /* Apply to all links inside the multi-level menu */

{

    font: bold 14px Arial, Helvetica, sans-serif;

    color: #FFFFFF;

    text-decoration: none;

    padding: 0 0 0 10px;



    /* Make the link cover the entire list item-container */

    display: block;

    line-height: 30px;

}

.top-level-menu a:hover { color: #000000; }


<ul class="top-level-menu">

    <li><a href="#">About</a></li>

    <li><a href="#">Services</a></li>

    <li>

        <a href="#">Offices</a>

        <ul class="second-level-menu">

            <li><a href="#">Chicago</a></li>

            <li><a href="#">Los Angeles</a></li>

            <li>

                <a href="#">New York</a>

                <ul class="third-level-menu">

                    <li><a href="#">Information</a></li>

                    <li><a href="#">Book a Meeting</a></li>

                    <li><a href="#">Testimonials</a></li>

                    <li><a href="#">Jobs</a></li>

                </ul>

            </li>

            <li><a href="#">Seattle</a></li>

        </ul>

    </li>

    <li><a href="#">Contact</a></li>

</ul>

我还整理了一个现场演示，可在此处使用