实现小米商城网页头部导航栏和搜索框
小知识点
1.给盒子设置层级，避免覆盖,但是盒子内有设置过overflow:hidden的时候，层级会不起效果
z-index:100;
2.注意设置relative的父元素，找到合适且不会影响其他元素的父元素才行
3.在内部有浮动的外层盒子写overflow:hidden是为了撑起盒子
4.宽度不定时，通过设置padding 来控制宽度
效果及整体代码
效果图
HTML部分
<!-- 导航S -->
<div class="page_nav">
<div class="container">
<a href="" class="logo"></a>
<div class="nav">
<ul class="nav">
<li class="nav_item" id="page_all_nav">
<a href="" class="tit">全部商品分类</a>
<div class="slider_nav">
<ul class="slider_ul">
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
<div class="slider_pop">
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
<a href="" class="pop_li">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ca871528d3420622f21f25be7aba58c.png?thumb=1&w=45&h=45&f=webp&q=90"
alt="">
<p>小米10</p>
</a>
</div>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
<li class="slider_li">
<a href="" class="name">
<!-- 下拉菜单-全部分类 -->
<span>手机</span>
<span>电话卡</span>
<i class="iconfont iconxiangyou1"></i>
</a>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">小米手机</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">Redmi 红米</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">电视</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">笔记本</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">家电</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">路由器</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">智能硬件</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">服务</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav_item">
<a href="" class="tit">社区</a>
<div class="pop">
<ul class="down_ul container">
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down_li last">
<span class="tags">新品</span>
<a href="" class="pic"><img
src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/31d0dc82068abcaa46464b4baa9fbbdf.jpg?thumb=1&w=180&h=124&f=webp&q=90"
alt=""></a>
<h3 class="name">Redmi K30 至尊纪念版</h3>
<p class="price">1999元</p>
<i></i>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="search">
<form action="">
<input type="text" class="q">
<input type="submit" class="btn" value="">
<div class="tags">
<span>小米10</span>
<span>小米10SE</span>
</div>
</form>
<ul class="hot">
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<li>
<a href="">
<span>小米10</span>
<i>约有10件</i>
</a>
</li>
<!-- <a href="">小米10 <span>约有10件</span></a> -->
</ul>
</div>
</div>
</div>
<!-- 导航E -->
style.css部分
.page_nav {
height: 96px;
position: relative;
}
.page_nav .logo {
display: block;
float: left;
width: 54px;
height: 54px;
margin-top: 21px;
background: #ff6700 url(../img/logo.jpg) center no-repeat;
margin-right: 45px;
}
.page_nav .nav_item {
margin-left: 16px;
float: left;
margin-top: 32px;
padding: 12px 2px 0;
height: 62px;
}
.page_nav .nav_item .tit {
font-size: 16px;
color: #666;
}
.page_nav .nav_item:hover .tit {
color: #ff6700;
}
.page_nav .nav_item .pop {
position: absolute;
width: 100%;
height: 230px;
left: 0;
top: 96px;
background-color: #fff;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
border-top: 1px solid #e0e0e0;
z-index: 10;
display: none;
}
/* .page_nav .down_ul {
overflow: hidden;
} */
.page_nav .down_li {
width: 241px;
float: left;
padding-top: 40px;
text-align: center;
position: relative;
}
.page_nav .down_li .pic img {
width: 160px;
height: 110px;
}
.page_nav .down_li .name {
font-weight: normal;
font-size: 13px;
margin-top: 20px;
}
.page_nav .down_li .price {
color: #ff6700;
margin-top: 5px;
}
.page_nav .down_li .tags {
width: 64px;
height: 20px;
border: 1px solid #ff6700;
line-height: 20px;
position: absolute;
left: 50%;
margin-left: -32px;
z-index: 100;
top: -1px;
color: #ff6700;
}
.page_nav .down_li i {
background-color: #e0e0e0;
width: 1px;
height: 100px;
position: absolute;
right: 0;
top: 36px;
}
.page_nav .down_li .last i {
display: none;
}
.page_nav .nav_item:hover .pop {
display: block;
}
/* 全部分类菜单样式 */
#page_all_nav {
visibility: hidden;
position: relative;
}
.slider_nav {
position: absolute;
width: 232px;
height: 418px;
border: 1px solid #ff6700;
background-color: #fff;
right: -15px;
top: 72px;
padding: 20px 0;
}
.slider_nav .slider_li {
line-height: 42px;
}
.slider_nav .slider_li .name {
font-size: 13px;
display: block;
padding: 0 24px 0 30px;
}
.slider_nav .slider_li .name span {
margin-left: 13px;
}
.slider_nav .slider_li i {
float: right;
}
.slider_nav .slider_li:hover .name {
background-color: #ff6700;
color: #fff;
}
.slider_nav .slider_pop {
position: absolute;
border: 1px solid #e0e0e0;
border-left: none;
width: 992px;
height: 460px;
left: 233px;
top: 0;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
display: none;
}
.slider_nav .pop_li {
float: left;
width: 223px;
padding-left: 24px;
overflow: hidden;
height: 56px;
margin-bottom: 10px;
padding-top: 26px
}
.slider_nav .pop_li img {
width: 40px;
height: 40px;
float: left;
margin-right: 16px;
}
.slider_nav .pop_li:hover {
color: #ff6700;
}
.slider_nav .slider_li:hover .slider_pop {
display: block;
}
/* 搜索框 */
.page_nav .search {
float: right;
position: relative;
margin-top: 24px;
}
.page_nav .search .q {
width: 227px;
height: 48px;
border: 1px solid #e0e0e0;
border-right: none;
outline: none;
line-height: 48px;
padding-left: 8px;
float: left;
}
.page_nav .search .tags {
position: absolute;
top: 17px;
right: 58px;
width: 160px;
text-align: right;
}
.page_nav .search .tags span {
line-height: 18px;
padding: 0 5px;
background-color: #eee;
font-size: 12px;
cursor: pointer;
}
.page_nav .search .tags .page_nav .search .tags:hover {
background-color: #ff6700;
color: #fff;
}
.page_nav .search .btn {
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
float: left;
cursor: pointer;
background: #fff url(../img/search.jpg) center no-repeat;
background-size: 30px 30px;
}
.page_nav .search .btn:hover {
background-color: #ff6700;
background-image: url(../img/search_on.jpg);
border-color: #ff6700;
}
.search:hover .q,
.search:hover .btn {
border-color: #b0b0b0;
}
.search.active .q,
.search.active .btn {
border-color: #ff6700;
}
.search .hot {
width: 234px;
border: 1px solid #ff6700;
border-top: none;
position: absolute;
left: 0;
top: 50px;
display: none;
}
.search .hot li {
line-height: 30px;
}
.search .hot li a {
display: block;
padding: 0 15px;
color: #535353;
}
.search .hot li:hover {
background-color: #fafafa;
}
.search .hot li i {
float: right;
font-style: normal;
color: #b0b0b0;
}
index.css部分
/* 全部分类菜单 */
.slider_nav {
background-color: rgba(0, 0, 0, 0.6);
width: 234px;
height: 420px;
border: none;
}
.slider_nav .slider_li .name {
color: #fff;
}
#page_all_nav .slider_nav {
visibility: visible;
}
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
