仿小米商城头部导航条
标签：
css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.site-topbar {
position: relative;
z-index: 30;
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
}
.topbar-nav ul li {
float: left;
}
.site-topbar a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
}
.topbar-nav ul li a {
line-height: 40px;
padding-left: 20px;
}
.topbar-nav ul li a:hover {
color: #fff;
}
.site-topbar .container {
overflow: visible;
position: relative;
}
.site-topbar .topbar-info {
float: right;
height: 40px;
line-height: 40px;
}
.site-topbar .topbar-info .link {
padding: 0 5px;
text-align: center;
}
.site-topbar .topbar-cart {
position: relative;
float: right;
width: 120px;
height: 40px;
margin-left: 15px;
transition: all .2s;
font-size: 12px;
}
.site-topbar .topbar-cart .cart-mini {
position: relative;
z-index: 99;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
background: #424242;
color: #b0b0b0;
}
.site-topbar .cart-menu {
position: absolute;
height: auto;
width: 316px;
z-index: 9999;
right: 0;
top: 40px;
display: none;
box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
transition: height .3s;
background: #fff;
/* 确保购物车菜单的背景颜色与 .cart-mini 一致 */
}
.site-topbar .cart-menu .msg {
padding: 20px 0 20px;
text-align: center;
}
/* 将 hover 效果绑定到父元素 */
.site-topbar .topbar-cart:hover .cart-mini {
color: #ff6700;
background: #fff;
border-bottom: rebeccapurple;
}
.site-topbar .topbar-cart:hover .cart-menu {
display: block;
}
</style>
</head>
<body>
<div id="site">
<div class="header">
<div class="site-topbar">
<div class="container">
<div class="topbar-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品</a></li>
</ul>
</div>
<div class="topbar-info">
<a href="#" class="link">登录</a>
<a href="#" class="link">注册</a>
<div class="topbar-cart">
<a href="#" class="cart-mini">购物车</a>
<div class="cart-menu">
<div class="msg">这里是购物车内容</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
