1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>购物车效果</title>
7
8 <style>
9 body {
10 background: black;
11 }
12
13 nav {
14 width: 120px;
15 height: 40px;
16 background: #ccc;
17 margin-left: 300px;
18 position: relative;
19 }
20
21 nav a {
22 display: block;
23 width: 100%;
24 height: 100%;
25 transition: 0.1s 1s;
26 /*鼠标移开*/
27 }
28
29 nav:hover a {
30 transition: 0.1s;
31 /*鼠标越过*/
32 background: white;
33 color: #ff4400;
34 }
35
36 .sub {
37 position: absolute;
38 right: 0px;
39 width: 300px;
40 height: 0px;
41 background: white;
42 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
43 transition: 1s;
44 }
45
46 nav:hover .sub {
47 height: 150px;
48 }
49 </style>
50 </head>
51
52 <body>
53
54 <nav>
55 <a href="">购物车</a>
56 <div class="sub">
57 子菜单
58 </div>
59 </nav>
60 </body>
61
62 </html>
时间： 2024-10-08 18:24:10