下拉菜单

来源：互联网发布：jsbrowser是什么软件编辑：程序博客网时间：2024/05/22 13:02
下拉菜单简版

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .top{                width: 100px;            }            .btn{                width: 100px;                height: 50px;                text-align: center;                line-height: 50px;                background: #00FA9A;                color: white;            }            .xl{                height: 200px;                width: 100px;                display: none;                background: #CCCCFF;            }            .btn:hover{                background: #008000;                cursor: pointer;            }            .top:hover .xl{                display: block;            }            .top:hover .btn{                background: #008000;            }            a{                display: block;                text-decoration: none;                height: 40px;                text-align: center;                line-height: 40px;                color:black;            }            a:hover{                background: #6699ff;                color: white;            }        </style>    </head>    <body>        <div class="top">            <div class="btn">                下来菜单            </div>            <div class="xl">                <a href="">链接</a>                <a href="">链接</a>                <a href="">链接</a>                <a href="">链接</a>            </div>        </div>    </body></html>
阅读全文
0 0