html小米左侧导航栏,小米PC导航栏下拉.html

*{

margin: 0;

padding: 0;

list-style: none;/*清除点*/

text-decoration: none;/*清除下划线*/

}

nav{

width: 100%;

height: 40px;

background-color: #333333;

}

nav>ul>li{

display: inline-block;

line-height: 40px;

color: #424242;

margin-left: 2px;

}

nav>ul>li>a{

font-size: 12px;

color: #B0B0B0;

}

nav>ul>.nav-one{

margin-left: 17.5%;

}

nav>ul>.nav-two{

margin-left: 12%;

}

nav>ul>.nav-three{

width: 120px;

height: 40px;

background-color: #424242;

margin-left: 15px;

}

nav>ul>.nav-three>.iconfont{

font-size:18px;

color: #B0B0B0;

margin-left: 10px;

}

header{

width: 100%;

/* height: 100px; */

height: 55px;

background-color: lightblue;

/* overflow: hidden; */

position: relative;

}

header>.h-one{

width: 55px;

height: 55px;

background-color:#ff6700;

margin-top: 22.5px;

margin-left: 17.5%;

}

header>ul{

width: 650px;

height: 55px;

/* background-color: olive; */

margin-left: 30%;

margin-top: -55px;

}

header>ul>li{

display: inline-block;

line-height: 55px;

margin-left: 13px;

}

header>ul>li>a{

color: #333333;

}

header>.h-two{

width: 300px;

height: 55px;

background-color: orchid;

margin-left: 66%;

margin-top: -55px;

}

header>.h-two>input{

width: 245px;

height: 50px;

border: 1px solid #999999;

}

header>.h-two>.button{

width: 50px;

height: 50px;

border: 1px solid #999999;

background-color: white;

margin-top: -52px;

margin-left: 245px;

}

header>.h-two>.button>.iconfont{

font-size: 30px;

color: #616161;

font-weight: 600;

display: block;

margin-left: 8px;

margin-top: 8px;

}

.container{

margin: 0 auto;

/* margin-left: 17.5%; */

width: 1100px;

}

header .h-three{

position: absolute;

top: 55px;

width: 100%;

height: 230px;

background-color: #fff;

border-top: 1px solid #ccc;

box-shadow: 0 3px 3px #ccc;

display: none;

}

.three-list{

display: flex;

height: 230px;

align-items: center;

}

.ul-list li:hover{

color: #FF6700;

}

• 小米商城
• |
• MIUI
• |
• loT
• |
• 云服务
• |
• 金融
• |
• 有品
• |
• 小爱开放平台
• |
• 企业团购
• |
• 资质证照
• |
• 协议规则
• |
• 下载app
• |
• Select Location
• 登录
• |
• 注册
• |
• 消息通知

• 购物车(0)

• 小米手机
• Redim 红米
• 电视
• 笔记本
• 家电
• 路由器
• 智能硬件

• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 

$('header .ul-list li').hover(function() {

var index=$(this).index();

if(index<4){

$('.h-three').stop().slideDown(200);

$('.three-list').eq(index).show().siblings().hide();

}

else{

$('.h-three').stop().slideUp(200);

}

});

$('.ul-list').mouseleave(function(){

$('.h-three').stop().slideUp(200);

})

$('.h-three').hover(function(){

$(this).stop().slideDown(200);

},

function(){

$(this).stop().slideUp(200);

}

)

// $('header ul').on('mouseenter','header ul li',function(){

// $(this).children('div').slideToggle(200);

// });

// $('header ul').on('mouseleave','header ul li',function(){

// $(this).children('div').slideToggle(200);;

// });

一键复制

编辑

Web IDE

原始数据

按行查看

历史