实现二级菜单

phpwsl  发布于 2018-08-22 16:28:09    75

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>ul导航实例——二级菜单</title>

        <style>

            *{margin:0;padding:0;}

            li{

                list-style:none;

            }

            ul > li{

                float:left;

                background:pink;

                width:120px;

                height:50px;

                text-align:center;

                line-height:50px;

            }

            ul > li:hover{

                background:purple;

                cursor:pointer;

            }

            ul > li:hover ol{

                display:block;

            }

            a{

                text-decoration:none;

                color:#333;

            }

            ol{

                background:#ccc;

                display:none;

            }

            ol > li:hover{

                background:#f99;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>首页</li>

            <li>选项1</li>

            <li>选项2</li>

            <li>

                选项3

                <ol>

                    <li>分类1</li>

                    <li>分类2</li>

                    <li>分类3</li>

                    <li>分类4</li>

                </ol>

            </li>

            <li>选项4</li>

            <li>选项5</li>

        </ul>

    </body>

    </html>