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>