纯CSS实现一,二级菜单_html/css_WEB-ITnose

<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;        }