老师，中间隐藏部分我想写过渡（官网有过渡），不能用display，所以我用了高度设为零，鼠标悬停后高度变为正常高度从而实现将隐藏部分显示出来的效果，但是我的效果就是有一条阴影线（官网没有），不知道哪里来的？并且鼠标悬停在这条线上，隐藏部分也会出来，可我语法里写的是鼠标悬停在Li标签上！我用display属性的时候，就一切正常，麻烦老师帮我看一下，一直困扰。
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-type:none;}
body{text-align: center;}
img,input{vertical-align:middle;}
img{border:none}
a{text-decoration: none;}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1617464689211'); /* IE9 */
src: url('iconfont.eot?t=1617464689211#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1617464689211') format('woff'),
url('iconfont.ttf?t=1617464689211') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1617464689211#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon-test:before {
content: "\e634";
}
.icon-icon-test1:before {
content: "\e63b";
}
.icon-icon-test2:before {
content: "\e63c";
}
.icon-icon-test3:before {
content: "\e63e";
}
.icon-icon-test4:before {
content: "\e63f";
}
.icon-icon-test5:before {
content: "\e640";
}
.icon-icon-test6:before {
content: "\e641";
}
.icon-icon-test7:before {
content: "\e642";
}
.icon-icon-test8:before {
content: "\e644";
}
.icon-icon-test9:before {
content: "\e645";
}
.icon-icon-test10:before {
content: "\e648";
}
.icon-icon-test11:before {
content: "\e64a";
}
.icon-icon-test12:before {
content: "\e64d";
}
.icon-icon-test13:before {
content: "\e64e";
}
.icon-icon-test14:before {
content: "\e64f";
}
.icon-icon-test15:before {
content: "\e650";
}
.icon-icon-test16:before {
content: "\e65f";
}
.icon-icon-test17:before {
content: "\e65e";
}
.icon-alipay:before {
content: "\e666";
}
.icon-taobao:before {
content: "\e667";
}
/* 白色导航部分 */
.white-nav{
width:100%;
height:100px;
/* background-color:cadetblue; */
position:relative;
}
.wrap-nav{
width:1226px;
height:100px;
margin: 0 auto;
}
/* 白色导航左侧logo处内容及样式 */
.logo{
width:56px;
height:56px;
float:left;
margin-top:22px;
position: relative;
overflow:hidden;
}
.logo>img{
width:56px;
height:56px;
/* 将引入的图片设置成带圆角形状 */
border-radius:40%;
position:absolute;
/* 图片位置改变有0.5s的过渡 */
transition:all .5s;
}
/* 对引入的两张图片进行绝对定位，鼠标悬停在父元素logo上，位置发生改变 */
.logo-mi2{
left:0;
}
.mifile{
left:-56px;
}
.logo:hover>.logo-mi2{
left:56px;
}
.logo:hover>.mifile{
left:0;
}
.logo:hover{
display:block;
}
/* 白色导航中间部分内容及样式 */
.nav-bar{
width:874px;
height:100px;
line-height:100px;
float:left;
}
.nav-bar>ul>li{
float:left;
}
.nav-bar>ul>li>a{
color:#333;
padding:0 10px;
}
.nav-bar>ul>li:first-child img{
margin-top:22.5px;
}
/* 鼠标悬停在中间部分Li标签里的超链接a上，字体颜色改变 */
.nav-bar>ul>li>a:hover{
color:#ff6700;
}
/* 中间部分隐藏的大盒子样式 */
.nav-bar-list{
width:100%;
height:0px;
background-color:#fff;
border-top:1px solid #eee;
box-shadow:0 2px 3px rgba(0,0,0,.18);
position:absolute;
top:100px;
left:0;
/* 当高度设置为0时，其里面的内容部分（含文字、图片等)即为溢出部分，将溢出部分隐藏用overflow:hidden */
overflow:hidden;
/* 将自己隐藏起来 */
/* display:none;和下文的display:block一起实现将元素隐藏再显示，但上文的高度需设置成应有的高度 */
}
/* 白色导航中间nav-bar部分隐藏的大盒子里嵌套一个div */
.wrap>ul>li{
width:180px;
height:229px;
float:left;
}
/* 隐藏的大盒子中li里的图片外嵌套一个div，目的是设置右边框 */
.img-box{
width:100%;
height:110px;
margin-top:35px;
margin-bottom:16px;
border-right:1px solid #e0e0e0;
box-sizing:border-box;
}
.img-box>img{
width:160px;
height:110px;
}
/* 最后一个Li元素里面的img-box右边框为0 */
.wrap>ul>li:last-child>.img-box{
border-right:0;
}
.name1,.price1{
font-size:12px;
line-height:20px;
}
.name1{
color:#333;
}
.price1{
color:#ff6700;
}
/* 鼠标悬停在li上，隐藏的大盒子显示出来 */
.nav-bar>ul>li:hover>.nav-bar-list{
/* display:block;第二种将元素显示出来的方法(但过渡属性不作用于display,作用于颜色、数值、转换、阴影，)，
用display:none;将nav-bar-list隐藏，高度为正常高度，而不是0，本效果要求过渡，所以用高度为0溢出隐藏的方法 */
height:229px;
}
/* 白色导航右侧搜索框内容及样式 */
.search{
width:296px;
height:100px;
/* background-color: darkkhaki; */
float:left;
position:relative;
}
.search>input{
width:244px;
height:50px;
padding:0 10px;
border:1px solid #e0e0e0;
font-size:14px;
margin-top:25px;
border-right:0;
box-sizing:border-box;
/* 鼠标点击后没有边框 */
outline:none;
float:left;
transition:all .2s;
}
.search>button{
width:52px;
height:50px;
margin-top:25px;
border:1px solid #e0e0e0;
outline:none;
float:left;
transition:all .2s;
}
/* 鼠标悬停在input上，input和它的兄弟相邻元素button的边框颜色改变 */
.search>input:hover,.search>input:hover~button{
border:1px solid #b0b0b0;
}
/* 鼠标悬停在button上，鼠标变为小手，背景颜色改变 */
.search>button:hover{
cursor:pointer;
background-color:#ff6700;
color:#fff;
}
.search>input:focus,.search>input:focus~button{
border:1px solid #ff6700;
}
.search-list{
width:245px;
height:181px;
background-color:#fff;
border:1px solid #ff6700;
border-top:none;
box-sizing:border-box;
position:absolute;
top:75px;
left:0;
display:none;
}
/* 在input处点击鼠标，其后面第二个元素即.search-list出现，（通用选择器） */
.search>input:focus~.search-list{
display:block;
} <!-- 白色导航部分 -->
<div class="white-nav">
<div class="wrap-nav">
<div class="logo">
<img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="" class="logo-mi2">
<img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="" class="mifile">
</div>
<div class="nav-bar">
<ul>
<li>
<a href="#">
<img src="../images/f58837161090e2e04bf687088b2ffe77.gif" alt="">
</a>
</li>
<li>
<a href="#">小米手机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<div class="img-box">
<img src="../images/85e44ea2405ff8414148bbde7446b137.png" alt="">
</div>
<p class="name1">小米MIX FOLD</p>
<p class="price1">9999元起</p>
</li>
<li>
<div class="img-box">
<img src="../images/1a359e9346e3c6ee8c9d8389e3fd9458.png" alt="">
</div>
<p class="name1">小米11 Ultra</p>
<p class="price1">5999元起</p>
</li>
<li>
<div class="img-box">
<img src="../images/a1c45eadcedeb27b1cafca0359422da9.png" alt="">
</div>
<p class="name1">小米11 Pro</p>
<p class="price1">4999元起</p>
</li>
<li>
<div class="img-box">
<img src="../images/56e3379b5422cb06e5c8a0c546445606.png" alt="">
</div>
<p class="name1">小米11 青春版</p>
<p class="price1">2299元起</p>
</li>
<li>
<div class="img-box">
<img src="../images/f9149ef3ba2c9025a4a21c98ae793808.png" alt="">
</div>
<p class="name1">小米10S</p>
<p class="price1">3299元起</p>
</li>
<li>
<div class="img-box">
<img src="../images/963679eaf3937351e154600ab3448460.png" alt="">
</div>
<p class="name1">小米11</p>
<p class="price1">3999元起</p>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="【以旧换新】至高补贴3888元">
<button class="iconfont"></button>
<div class="search-list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
不可选
京公网安备 11011402011233号