问题：
下载APP部分：为什么在download-list的父元素download（内容为下载APP的li标签）上设置overflow:hidden;将子元素download-list
（当做download的溢出部分）隐藏后,鼠标悬停在download上，运用display:block; 子元素download-list不显示出来？
html,body,div,h1,h2,h3,h4,h5,h6,dd,dt,dl,form,label,table,caption,tbody,tfoot,thead,tr,td,th,ul,ol,li,pre
,fieldset,legend,input,textarea,button,blockquote,p{margin:0 ;padding；0;}
ul,ol,li{list-style:none;}
body{text-align: center;}
img,input{vertical-align:middle;}
img{border:none};
a{text-decoration:none;}
/* 黑色导航部分 */
a{
text-decoration:none;
}
.black-nav{
width:100%;
height:40px;
line-height: 40px;
background-color:#333;
color:#b0b0b0;
font-size:12px;
}
.black-nav>div{
width:1226px;
margin:0 auto;
}
/* 导航条左侧无序列表往左浮动，使之位于左边，和右侧的无序列表同设置并行排列*/
.black-nav-left{
float:left;
}
/* 导航条右侧无序列表往右浮动，无使之位于右边 */
.black-nav-right{
float:right;
}
/* 左侧无序列表项目往左浮动，使之从左往右水平排列 */
.black-nav-left li{
float:left;
}
/* 右侧无序列表项目往左浮动，使之从左往右水平排列 */
.black-nav-right li{
float:left;
}
/* 给无序列表内容|设置样式 */
.black-nav span{
color:#424242;
margin:0 .3em;
}
.black-nav a{
color:#b0b0b0;
}
/* 鼠标悬停在超链接上字体颜色改变 */
.black-nav a:hover{
color:#fff;
}
/* 购物车部分 */
/* 给内容为购物车的li标签设置样式，相对定位，过渡特性 */
.cart{
width:120px;
height:40px;
line-height:40px;
text-align:center;
background-color:#424242;
margin-left:25px;
position:relative;
transition:all 0.3s;
}
/* 鼠标悬停在cart（内容为购物车的li标签）超链接字体颜色变为红色 */
.black-nav-right .cart:hover>a{
color:red;
}
/* 鼠标悬停在cart上背景颜色变为白色 */
.cart:hover{
background-color:#fff;
}
/* 给内容为购物车的li标签嵌套一个名为cart-list的div，给其设置样式，绝对定位并隐藏 */
.cart-list{
width:316px;
height:78px;
line-height:78px;
background-color:#fff;
color:#424242;
box-shadow:0 2px 10px rgba(0,0,0,.15);
position:absolute;
top:40px;
right:0;
display:none;
}
/* 鼠标悬停在内容为购物车的li标签上，嵌套的div(car-list)显示 */
.cart:hover>.cart-list{
display:block;
}
/* 下载APP处的二维码部分 */
/* 给内容为下载APP的li标签设置相对定位 */
.download{
position:relative;
/* 为什么在download-list的父元素download上设置overflow:hidden;将子元素download-list
（当做download的溢出部分）隐藏后,鼠标悬停在download上，运用display:block; 子元素download-list不显示出来？ */
/* overflow:hidden; */
/* transition:all 0.2s; */
}
/* 内容为下载APP的li标签嵌套一个名为download-list的div，并对其设置样式，绝对定位 */
.download-list{
width:124px;
height:0px;
background-color:#fff;
color:#333;
font-size:14px;
line-height:14px;
text-align:center;
box-shadow:0 1px 5px #aaa;
position:absolute;
top:40px;
left:50%;
margin-left:-62px;
/* 将其高度设为0，里面的文字即为溢出部分，将其隐藏 */
overflow:hidden;
/* 给高度设置0.3s的过渡 */
transition:all .3s;
/* display:none;和下文鼠标悬停在download上使其显示的display:block是本代码中另一种将元素隐藏再显示的方法 */
}
/* 给download-list里的图片设置样式 */
img{
width:90px;
height:90px;
margin:18px auto 12px;
}
/* 鼠标悬停在内容为下载APP的li标签上，其嵌套的download-list高度由0变为148px */
.download:hover>.download-list{
/* display:block; */
height:148px;
}
/* 给内容为下载APP的li标签再嵌套一个向上的三角形并设置样式，再隐藏 */
.stri{
width:0;
right:0;
border-bottom:10px solid white;
border-left:10px solid transparent;
border-right:10px solid transparent;
position:absolute;
bottom:0;
left:50%;
transform:translate(-10px,0);
display:none;
transition:all 0.3s;
}
/* 鼠标悬停在内容为下载APP的Li标签上，向上的三角形显示,并且有持续时间的过渡 */
.download:hover>.stri{
display:block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米黑色导航部分</title>
<link rel="icon" href="../images/favicon.ico">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/小米黑色导航部分.css">
</head>
<body>
<div class="black-nav">
<div>
<div class="black-nav-left">
<ul>
<li><a href="#">小米商城</a>
<span>|</span>
</li>
<li><a href="#">MIUI</a>
<span>|</span>
</li>
<li><a href="#">loT</a>
<span>|</span>
</li>
<li><a href="#">云服务</a>
<span>|</span>
</li>
<li><a href="#">天星数科</a>
<span>|</span>
</li>
<li><a href="#">有品</a>
<span>|</span>
</li>
<li><a href="#">小爱开放平台</a>
<span>|</span>
</li>
<li><a href="#">企业团购</a>
<span>|</span>
</li>
<li><a href="#">资质证照</a>
<span>|</span>
</li>
<li><a href="#">协议规则</a>
<span>|</span>
</li>
<li class="download"><a href="#">下载APP</a>
<!-- 为什么download下嵌套的两个div和span标签的前后顺序不一样解析结果也不一样 -->
<div class="download-list">
<img src="../images/download.png" alt="">
<p>小米商城APP </p>
</div>
<span>|</span>
<div class="stri"></div>
</li>
<li><a href="#">智能生活</a>
<span>|</span>
</li>
<li><a href="#">SelectLocation</a>
</li>
</ul>
</div>
<div class="black-nav-right">
<ul>
<li><a href="">登录</a>
<span>|</span>
</li>
<li><a href="">注册</a>
<span>|</span>
</li>
<li><a href="">消息通知</a>
</li>
<li class="cart"><a href="">购物车(0)</a>
<div class="cart-list">购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
京公网安备 11011402011233号