首页 > 学院 > 开发设计 > 正文

css+html完成下拉框

2019-11-14 09:51:03
字体:
来源:转载
供稿:网友

菜单样式如下:

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表