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>购物车css样式效果
原文地址：http://www.cnblogs.com/oklfx/p/7499623.html