html制作的下拉菜单

来源：互联网发布：二阶矩阵的逆矩阵编辑：程序博客网时间：2024/05/16 17:31
代码如下
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .a{                width: 205px;            }            .b{                width: 200px;                height: 50px;                background-color: limegreen;                text-align: center;                line-height: 50px;                color: #ffffff;            }            .c{                width: 200px;                height: 300px;                background-color: gainsboro;                display: none;                /*visibility: hidden;*/            }            ul{                list-style: none;                margin-left: -40px;             }            ul li{                line-height: 50px;                display: block;                width: 200px;                text-align: center;            }            .a:hover{                cursor: pointer;            }            .a:hover .c{                display: block;            }            .a:hover .b{                background-color: green;            }            li:hover{                background-color: gray;                color: #FFFFFF;            }        </style>    </head>    <body>        <div class="a">            <div class="b">                关于我们            </div>            <div class="c">                <ul>                    <li>公司简介</li>                    <li>董事长致辞</li>                    <li>企业文化</li>                    <li>团队风采</li>                </ul>            </div>        </div>    </body></html>
效果图
阅读全文
1 0