下拉菜单的实现

来源：互联网发布：淘宝网首页布局介绍编辑：程序博客网时间：2024/04/18 11:49

说明:鼠标放在绿色框内，出现下方灰色边框和里面的内容，
实现其效果的代码如下:

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

阅读全文

0 0