有序列表跟无序列表的嵌套

    
    
    



    

        
        

            

                商品分类
                
                

                    
女装 /内衣
                    
男装 /运动户外
                    
女鞋 /男鞋 /箱包
                    
化妆品 /个人护理
                    
腕表 /饰品 /眼镜
                    
手机 /数码 /办公
                    
零食 /食品 /茶酒
                    
 生鲜水果
                    
生活电器
                
            
            
春节特卖
                
                

                    
服装服饰
                    
母婴会场
                    
数码家电
                    
家纺家居
                    
美妆会场
                    
汽车特卖
                    
进口尖货
                    
医药保健

                
            
            
会员
            
电器城
            
天猫会员
        
    

@charset "utf-8";
/**css document*/
* { /*通配选择器，清除默认样式*/
    margin: 0;
    padding: 0;
    list-style: none;
}

#mr-box { /*id选选择器，设置边框样式*/
    width: 1097px;
    height: 541px;
    margin: 0 auto;
    border: 2px solid rgb(255, 0, 0);
}

.mr-bg { /*类选择器，设置居中背景样式*/
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    background: url("../images/2.jpg") no-repeat bottom/1000px 463px;
}

.mr-bg .mr-row { /*包含选择器，设置横向导航栏背景样式*/
    width: 1000px;
    height: 38px;
    background: rgb(221, 39, 39);
}

.mr-row .pic { /*包含选择器，设置横向导航栏字体样式*/
    width: 160px;
    height: 38px;
    float: left;
    padding-left: 20px;
    line-height: 38px;
    position: relative;
}

.mr-row .pic:first-child { /*伪类选择器，设置导航栏第1项样式*/
    margin-left: 35px;
}

.mr-row .pic:hover { /*包含选择器，设置横向导航栏鼠标悬停样式*/
    background: rgb(224, 61, 61);
}

/**-- 第1列横向导航栏内坚向导航栏 --**/
ol { /*设置有序列表隐藏导航栏样式*/
    width: 180px;
    height: 343px;
    font-size: 14px;
    background: rgb(254, 209, 203);
    float: left;
    position: absolute;
    left: 0;
    display: none; /*默认隐藏该样式内容*/
}

ol li { /*包含选择器，设置字体缩进*/
    text-indent: 35px;
}

ol li:hover { /*鼠标悬停显示样式背景*/
    background: rgb(255, 255, 255);
}

.pic:hover ol { /*鼠标悬停显示隐藏有序列表标签*/
    display: block;
}

/** 春节特卖样式 **/
.mr-coll { /*设置春节特卖隐藏导航栏样式*/
    width: 185px;
    height: 432px;
    background: rgb(254, 218, 214);
    position: absolute;
    left: 0;
}

.mr-coll li { /*设置春节特卖隐藏导航栏样式*/
    width: 153px;
    height: 32px;
    border: 1px solid rgb(203, 12, 16);
    border-radius: 10px;
    line-height: 32px;
    text-align: center;
    margin: 15px auto;
}

.mr-coll li:hover { /*设置春节特卖隐藏导航栏鼠标划过样式*/
    background: rgb(203, 12, 16);
}