纯CSS实现一,二级菜单

<ul>

        <li> <a href="#">首页</a></li>

        <li>

            <a href="#">

                 编程

            </a>

            <ol>

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

                <li> <a href="#">C/C++</a> </li>

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

            </ol>

        </li>

        <li>

            <a href="#">

                前端

            </a>

            <ol>

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

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

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

            </ol>

        </li>

</ul>

     a {

            color: black;

            text-decoration: none;

        }

        a:hover{

            color: #fff;

        }

        ul,li,ol{

            list-style: none;

            padding: 0;

            margin: 0;

        }

        ol, li{

            display: inline-block;

        }

        ul{

            background-color: #44b549;

            padding: 5px 10px;

            border-radius: 5px;

        }

        ul > li {

            position: relative;

            margin-left: 15px;

        }

        ul > a{

            display: block;

        }

        ul > li > a:hover,ul > li:hover > a{

            background-color: #eee;

            color: #44b549;

        }

        ul > li > ol {

            display: none;

            position: absolute;

            width: 300px;

            background-color: #44b549;

            font-size: 12px;

            line-height: 22px;

            padding: 5px;

            border-radius: 5px;

        }

        ul > li:hover ol{

            display: block;

        }