|
|
@@ -0,0 +1,59 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .drow-content{
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ button{
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: #4caf51;
|
|
|
+ border:0;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .drow-menu{
|
|
|
+ width: 300px;
|
|
|
+ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .drow-item{
|
|
|
+ height: 50px;
|
|
|
+ padding: 10px;
|
|
|
+ line-height: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .drow-item:hover{
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #ddd;
|
|
|
+ }
|
|
|
+ .drow-content:hover .drow-menu{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .drow-content:hover button{
|
|
|
+ background-color: #3e8e41;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="drow-content">
|
|
|
+ <button>下拉菜单</button>
|
|
|
+ <div class="drow-menu">
|
|
|
+ <div class="drow-item">
|
|
|
+ 下拉菜单1
|
|
|
+ </div>
|
|
|
+ <div class="drow-item">
|
|
|
+ 下拉菜单2
|
|
|
+ </div>
|
|
|
+ <div class="drow-item">
|
|
|
+ 下拉菜单3
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
