小米官网导航栏的实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商品导航title>
<style>
.box{
width: 1000px;
height: 400px;
border: black solid 1px;
margin: 0 auto;
margin-top: 50px;
/* 子绝父相：对右边的东西 定位 */
position: relative;
}
.left{
float: left;
width: 20%;
height: 100%;
background-color: rgb(72, 63, 81);
}
.right{
float: left;
width: 80%;
height: 100%;
}
.nav{
list-style: none;
margin: 0 0;
padding: 0 0;
}
/* 避免右边商品区的padding-left与nav下的链接区混淆，所以用子类选择器 */
.nav>li>a{
/* a标签转化为块元素，设置高 */
display: block;
height: 40px;
/* 内容垂直居中 */
line-height: 40px;
color: white;
text-decoration: none;
padding-left: 30px;
position: relative;
}
li span{
display: inline-block;
color: white;
position: absolute;
right: 30px;
}
li:hover{
background-color: rgb(255,103,0);
}
/* 手机 */
.shouji{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.shouji ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.shouji ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .shouji{
display: block;
}
/* 电视 */
.dianshi{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.dianshi ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.dianshi ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .dianshi{
display: block;
}
/* 笔记本 */
.bijiben{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.bijiben ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.bijiben ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .bijiben{
display: block;
}
/* 家电 */
.jiadian{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.jiadian ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.jiadian ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .jiadian{
display: block;
}
/* 出行 */
.chuxing{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.chuxing ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.chuxing ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .chuxing{
display: block;
}
/* 智能 */
.zhineng{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.zhineng ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.zhineng ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .zhineng{
display: block;
}
/* 电源 */
.dianyuan{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.dianyuan ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.dianyuan ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .dianyuan{
display: block;
}
/* 健康 */
.jiankang{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.jiankang ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.jiankang ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .jiankang{
display: block;
}
/* 耳机 */
.erji{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.erji ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.erji ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .erji{
display: block;
}
/* 生活 */
.shenghuo{
width: 800px;
height: 400px;
/* 子绝父相 对于最大的盒子 */
position: absolute;
top: 0px;
right: 0px;
/* 开始要隐藏盒子 */
display: none;
}
.shenghuo ul li{
width: 400px;
height: 400px;
margin-left: 0px;
float: left;
display: block;
}
.shenghuo ul{
list-style: none;
margin: 0 0;
padding: 0 0;
}
.nav>li:hover .shenghuo{
display: block;
}
style>
head>
<body>
<div class="box">
<div class="left">
<ul class="nav">
<li>
<a href="https://www.mi.com/p/1915.html">手机 电话卡<span>>span>a>
<div class="shouji">
<ul>
<li><a href="https://www.mi.com/buy/detail?product_id=12609"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1597145894.51396359.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/buy/detail?product_id=10000244"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1590373114.47998349.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/a/h/9819.html">电视 盒子<span>>span>a>
<div class="dianshi">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E9%87%8F%E5%AD%90%E7%82%B9%E7%94%B5%E8%A7%86"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1593671513.90269727.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/search?keyword=%E5%B0%8F%E7%B1%B3%E7%9B%92%E5%AD%90"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1546997991.03868800.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/a/h/7529.html">笔记本 显示器<span>>b>a>
<div class="bijiben">
<ul>
<li><a href="https://www.mi.com/buy/detail?product_id=10000242"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1594107583.22838030.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/buy/detail?product_id=12290"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1591755481.58867678.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/p/9285.html">家电 插线板<span>>span>a>
<div class="jiadian">
<ul>
<li><a href="https://www.mi.com/buy/detail?product_id=10330"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1563787495.73232959.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/search?keyword=%E6%8F%92%E6%8E%92"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571660595.33144009.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/p/9289.html">出行 穿戴<span>>span>a>
<div class="chuxing">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E6%BB%91%E6%9D%BF%E8%BD%A6"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1553484007.64174630.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/search?keyword=%E7%9F%B3%E8%8B%B1%E8%A1%A8"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1597029198.00185696.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/a/h/8363.html">智能 路由器<span>>span>a>
<div class="zhineng">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E5%B0%8F%E7%88%B1%E9%9F%B3%E7%AE%B1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ab7943ae5215e0faacb04f7270d9cfb.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/search?keyword=%E5%B0%8F%E7%B1%B3%E8%B7%AF%E7%94%B1%E5%99%A8"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1581411766.33688586.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/p/9290.html">电源 配件<span>>span>a>
<div class="dianyuan">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E5%85%85%E7%94%B5%E5%AE%9D"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572510715.11624812.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/search?keyword=%E9%BB%91%E9%B2%A8%E9%85%8D%E4%BB%B6"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1582894555.2518310.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/p/9291.html">健康 儿童<span>>span>a>
<div class="jiankang">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E6%97%A9%E6%95%99%E5%90%AF%E6%99%BA"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/1acf1167-8a6d-cefb-7805-628f78a6aa33.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/buy/detail?product_id=9834"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1558685484.81067420.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/p/9292.html">耳机 音箱<span>>span>a>
<div class="erji">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E5%A4%B4%E6%88%B4%E8%80%B3%E6%9C%BA"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b8b1dd3a6fb92bd0c08bdef02e77a4d2.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/buy/detail?product_id=13032"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1603769846.04494192.jpg" width="400px">a>li>
ul>
div>
li>
<li>
<a href="https://www.mi.com/p/9293.html">生活 箱包<span>>span>a>
<div class="shenghuo">
<ul>
<li><a href="https://www.mi.com/search?keyword=%E5%8F%8C%E8%82%A9%E5%8C%85"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1561718076.45448546.jpg" width="400px">a>li>
<li><a href="https://www.mi.com/search?keyword=%E7%9C%BC%E9%95%9C"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1556533073.62795224.jpg" width="400px">a>li>
ul>
div>
li>
ul>
div>
<div class="right">
<div class="backimage">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section1-1.jpg" width="100%" height="400px">
div>
div>
div>
body>
html>
小米官网导航栏效果