html:
（1）下拉层的div和ul>li放在同一层
（2）给所有需要下拉弹出的设置好统一class
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title><link rel="stylesheet" href="../css/reset.css"><link rel="stylesheet" href="../css/base.css"><link rel="stylesheet" href="../css/index.css"><link rel="stylesheet" href="../fa/css/all.css"></head><body><div class="wrapper"><div class="top-bar-wrapper"><ul class="top-bar-left"><li class="top-left-wrapper"><a href="javascript:;">小米商城</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">MIUI</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">loT</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">云服务</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">天星数科</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">有品</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">小爱开放平台</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">企业团购</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">资质证照</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">协议规则</a></li><li class="line-space">|</li><!-- 在父子元素中嵌入三角和download图片 --><li class="top-left-wrapper"><a class="app" href="javascript:;">下载app<div class="download"><img src="../img/download.png" alt="download_app"><span>小米商城APP</span></div></a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">智能生活</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">Select Location</a></li></ul><!-- 两个同时float: right;那么必须排在右边的写在前面，因为会把写在前面的优先放到右边去 --><ul class="top-bar-right"><li class="top-left-wrapper top-right-shopping"><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车（0）<div class="shopping-cart"><span>购物车中还没有商品，赶紧选购吧！</span></div></a></li></ul><ul class="top-bar-center"><li class="top-left-wrapper message"><a href="javascript:;">消息通知</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">注册</a></li><li class="line-space">|</li><li class="top-left-wrapper"><a href="javascript:;">登录</a></li></ul></div></div><div class="head-wrapper "><h1 class="logo" title="小米"><a class="mi-logo" href="/"></a><a class="mi-home" href="/"></a></h1><div class="head-center-wrapper"><!-- 创建一个专门的容器 --><ul class="head-center-ul clearfix"><li><a class="all-goods" href="/">全部商品分类</a></li><li class="open-goods"><a href="/">小米手机</a></li><li class="open-goods"><a href="/">Redmi手机</a></li><li class="open-goods"><a href="/">电视</a></li><li class="open-goods"><a href="/">家电</a></li><li class="open-goods"><a href="/">笔记本</a></li><li class="open-goods"><a href="/">路由器</a></li><li class="open-goods"><a href="/">智能硬件</a></li><li><a href="/">服务</a></li><li><a href="/">社区</a></li><div class="show-goods"></div></ul></div><div class="head-right-wrapper"></div></div></div><div class="body"></div></body></html>
css:
（1）如果没有设置width,那么会从祖先父辈处继承
（2）父辈别轻易设置position:relative;否则会非常不容易找到需要的width
（3）脱离出文档流，用position:absolute;但同时也需要设置top和left值，才能使得元素到达指定的位置
（4）对于transition，设置效果,height可以为一个参数，同时设置好变化时间
（5）对于需要设置好的border,暂时不想得到效果，那么采用hover之后才出现，同时为了防止溢出，采取overflow:hidden;来屏蔽
（6）移动阴影效果，第一个值，移动左右，第二个值移动上下
body {
width: 1920px;
overflow: hidden;
}
/* 整个板块float */
.top-bar-left {
float: left;
margin-left: 190px;
position: relative;
}
/* 当需要超链接上下部分也显示hover效果，将超链接设置为display: block;即可达到效果 */
a {
display: block;
}
a:hover {
color: white;
}
/* 里面的li 也要设置float,否者下面的li只会竖直排列 */
.top-bar-left li {
float: left;
height: 40px;
line-height: 40px
}
/* 三个border设置为 rgba(0,0,0,0),剩下一个设置颜色，宽高设置为0，即可，将display设置为none,,在hover中设置block;即可动态显示*/
.app {
position: relative;
}
/* 设置app下的小三角 */
.app::after {
content: ''; /* content CSS属性用生成的值替换元素。使用content属性插入的对象是匿名替换的元素。 */
position: absolute;/*开启绝对定位，同时将父元素设置为相对定位，那么可在父元素周围使用left等来移动 */
display: none;
width: 0px;
height: 0px;
border: 7px solid transparent;
border-top: none;
border-bottom-color: #fff;
bottom: 0px;
/* 使用left right = 0 ,margin: auto;来自动对齐 */
left: 0px;
right: 0px;
margin: auto;
}
/* 对文字设置居中，如果是行内元素，应在其父元素（块）中进行设置 */
.download {
/* display: none; */
position: absolute;
left: -40px;
width: 124px;
height: 0px;
line-height: 1px;
text-align: center;
background-color: #fffafa;
box-shadow: 0 0 10 rgba(0,0,0.3);
overflow: hidden;
}
.top-left-wrapper:hover .app::after,
.app:hover .download {
height: 148px;
transition: all 0.3s;
display: block;
}
/* 写入hover时，对于需要移入部分唤出隐藏部分，那么对移入部分hover,然后空格 需要唤醒的部分 */
.top-bar-left .download img {
width: 90px;
height: 90px;
margin: 17px;
}
.top-bar-left .download span {
font-size: 14px;
color: #333333;
}
/* 如果设置nth-child，反而找不到该li标签，因为后面 */
/* .top-bar-left:hover .triangle{
display: block;
}
.top-bar-left :nth-child(1) :hover .download{
display: block;
} */
/* 单独对中线设置，并标好颜色，否者无法显示分割线 */
.line-space {
width: 1px;
height: 13px;
color: #424242;
margin: 0 8px;
}
.top-bar-center {
float: right;
margin-right:148px;
}
.top-bar-center li {
float: right;
height: 40px;
line-height: 40px
}
.top-bar-center .message {
padding: 0 10px;
}
/* 此处是设置水平居中，水平居中是text-align,当时错误设置为vertical-align,同时因为line-height 和 height一致，所以直接废掉了vertical-align */
.top-bar-right {
float: right;
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
margin-right: 537px;
margin-left: -145px;
position: relative;
display: block;
background-color: #424242;
}
/* hover是作用于a标签的，而不是随便用 */
.top-bar-right a:hover{
color: #FF6701;
}
.top-bar-right .fas.fa-shopping-cart {
margin-right: 2px;
}
.top-bar-right .shopping-cart {
background-color: #f5f5f5;
width: 316px;
height: 100px;
line-height: 100px;
position: absolute;
right: 0px;
color: #333;
font-size: 14px;
display: none;
}
.top-bar-right:hover .shopping-cart {
display: block;
}
/* 设置第二排导航条 */
.head-wrapper {
width: 100%;
height: 100px;
position: relative;
}
.head-wrapper .logo {
width:55px;
height: 55px;
float: left;
position: relative;
margin-top: 22px;
margin-left: 190px;
left: 0px;
overflow: hidden;
}
.head-wrapper .logo a{
width:55px;
height: 55px;
position: absolute;
background-image: url('../img/mi-logo.png');
}
.head-wrapper .logo .mi-logo{
background-color: #FF6700;
}
.head-wrapper .logo .mi-home{
position: absolute;
left:-55px;
background-image: url('../img/mi-home.png');
background-color: #FF6700;
}
.head-wrapper .logo:hover .mi-logo{
transition: left 0.3s;
right: 55px;
}
.head-wrapper .logo:hover .mi-home{
transition: left 0.3s;
left: 0px;
}
.head-center-wrapper {
width: 850px;
height: 100px;
background-color: #f5f5f5;
float: left;
margin-left: 7px;
line-height: 100px;
}
.head-center-wrapper .head-center-ul li{
float:left;
}
.head-center-wrapper .head-center-ul li a {
position: block;
text-decoration: none;
color: #333333;
font-size: 16px;
margin-right: 20px;
}
.head-center-wrapper .head-center-ul li .all-goods {
visibility: hidden;
}
.head-center-wrapper .head-center-ul a:hover {
color: #FF6700;
}
.head-wrapper .show-goods {
height: 0px;
width: 100%;
overflow: hidden;
position: absolute;
background-color: rgb(245,245,245);
top:100px;
left:0px;
transition: height 0.5s;
}
.open-goods:hover ~.show-goods,
.show-goods:hover {
height: 284px;
border-top: 1px solid rgb(224,224,224);
box-shadow: 0 15 3 rgba(0,0,0,0.3);
}
若有收获，就点个赞吧
0 人点赞
