使用列表实现导航嵌套（ul、ol、display：block/none的使用）

效果展示

代码

HTML

"en">

    "UTF-8">
    
    "main.css" rel="stylesheet">


"mr-box">
    
"mr-nav">
        

            
"mr-hover">"#">商品分类
                
"mr-item">
                    
"#">女装 /内衣
                    
"#">男装 /运动户外
                    
"#">女鞋 /男鞋 /箱包
                    
"#">化妆品 /个人护理
                    
"#">腕表 /饰品 /眼镜
                    
"#">手机 /数码 /办公
                    
"#">零食 /食品 /茶酒
                    
"#"> 生鲜水果
                    
"#">生活电器
                
            
            
"mr-hover">"#">春节特卖
                
"mr-shopbox">
                    
"#">服装服饰
                    
"#">母婴会场
                    
"#">数码家电
                    
"#">家纺家居
                    
"#">美妆会场
                    
"#">汽车特卖
                    
"#">进口尖货
                    
"#">医药保健
                
            
            
"mr-hover">"#">会员
            
"mr-hover">"#">电器城
            
"mr-hover">"#">天猫会员
        
    

CSS

.mr-box {
    width: 1000px;
    height: 500px;
    background-image: url(./images/2.jpg);
    background-repeat: no-repeat;
    margin: 0 auto;
    background-size: 100% 100%;
}
* {
    margin: 0;
    padding: 0;
}
.mr-nav>ul, ol {
    width: 93%;
    margin: 0 auto;
}
.mr-nav {
    background: #DD2727;
    height: 37px;
    width: 1000px;
}
.mr-nav li {/*导航栏的li的样式*/
    width: 176px;
    text-align: center;
    list-style: none;
    float: left;
    line-height: 37px;
}
.mr-hover:hover {  /*当鼠标移动上去时导航栏变色*/
    background: rgba(255,255,255,0.1);
}
.mr-nav li a {
    text-decoration: none;  /*无下划线*/
    font-size: 17px;
    font-weight: 500;    /*字体粗细*/
    padding: 6px 17px;  /*内边距*/
    color: #222;
    font-family: "宋体";
}
.mr-nav li:hover .mr-item,.mr-nav li:hover .mr-shopbox {
    display: block;
}
.mr-nav li ol {
    width: 179px;
    display: none;
    background: rgba(255,255,255,0.5);
}
.mr-nav li ul{
    width: 175px;
    display: none;
    padding-left: 20px;
    background: rgba(255,255,255,0.5);
}
.mr-shopbox li {
    width: 153px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    margin: 15px auto 0;
    border: 1px solid #CB0C10;
    border-radius: 10px;
}
.mr-shopbox li:hover {
    background: #CB0C10;
}
.mr-item {
    background: #fff;
}
.mr-item li {
    width: 100%;
}
.mr-item li a {  /* li的所有子元素a的样式*/
    font-size: 14px;
    font-family: "宋体";
    color: #000;
}
.mr-item li:hover {  /*鼠标滑过li时的样式*/
    background: #fff;
}
.mr-item li:hover a{  /*鼠标滑过a时*/
    color: #DD2727
}
.mr-shopbox li a {
    text-decoration: none;
    color: #111;
    font-size: 14px;
    font-family: "微软雅黑";
}
.mr-shopbox {
    background: rgba(0, 0, 0, 0.5);/*背景色*/
    width: 234px;
    height: 432px;
}