<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车效果</title>
<style>
body {
background: black;
}
nav {
width: 120px;
height: 40px;
background: #ccc;
margin-left: 300px;
position: relative;
}
nav a {
display: block;
width: 100%;
height: 100%;
transition: 0.1s 1s;
/*鼠标移开*/
}
nav:hover a {
transition: 0.1s;
/*鼠标越过*/
background: white;
color: #ff4400;
}
.sub {
position: absolute;
right: 0px;
width: 300px;
height: 0px;
background: white;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
transition: 1s;
}
nav:hover .sub {
height: 150px;
}
</style>
</head>
<body>
<nav>
<a href="">购物车</a>
<div class="sub">
子菜单
</div>
</nav>
</body>
</html>