css+html完成下拉框

来源：互联网发布：windows longhorn iso 编辑：程序博客网时间：2024/05/03 20:49
菜单样式如下：
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />     <title>下拉菜单</title>    <style type="text/css">        .dropdown{            position: relative;            display: inline-block;        }        .dropdown .dropdown-content{            display: none;            position: absolute;            background-color: #f9f9f9;            min-width: 160px;            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);        }        .dropdown:hover .dropdown-content{            display: block;        }        .dropdown-content a{            color: black;            font-family: "微软雅黑", "方正书体", "宋体";            text-decoration: none;            padding: 12px 16px;            display: block;        }        .dropbtn{            background-color: #4CAF50;            color: white;            border: none;            font-size: 16px;            font-family: "微软雅黑", "方正书体", "宋体";            padding: 16px;            cursor: pointer;        }        .dropdown-content a:hover {            background-color: #f1f1f1        }        .dropdown:hover .dropbtn{            background-color: #3e8e41;;        }    </style></head><body>    <div class = "dropdown">        <button class="dropbtn">下拉菜单</button>        <div class="dropdown-content">            <a href="#">wangzhuo</a>            <a href="#">wangzhuo</a>            <a href="#">wangzhuo</a>        </div>    </div></body></html>
0 0