二级菜单--竖排---HTML

二级菜单–竖排

---

• 这是作为回顾之前学习的东西
• 大家也可以康康作为一种回顾
• 二级菜单 —竖 排
• 不足的地方请大家指出来
• 代码照常 都有详细解释

效果图

    
    
    
    
    


    

        
        
        

            
 一级菜单
                

                    
二级菜单
                
            
            

                一级菜单
                

                    
二级菜单
                    
二级菜单
                    
二级菜单
                
            

            

                一级菜单
                

                    
二级菜单
                    
二级菜单
                    
二级菜单
                
            
        
    

下面是css代码

---

body{
     
    font-size: 14px;
    color: black;
    background-color: #ccc;
    font-family: Arial, Helvetica, sans-serif,"微软雅黑";
    line-height: 1.5;
}

a{
     
    color: #00a1d6;
    text-align: center;
}


.main{
     
    width: 220px;
    border: 1px solid #eee;
    margin: 10px auto;
    box-sizing: border-box;
}


.main ul li{
     
    border: 1px solid #eee;
    line-height: 50px;
    height: 50px;
    
    background-color:#fff;
    position: relative;
    text-align: center;
    
    box-sizing: border-box;
}
.main ul li ul{
     
    display: none;
    
    position: absolute;
    left: 218px;
    top: -3px;
    width: 120px;
    height: 50px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.main li:hover{
     
    background-color: #008c8c;
}

.main ul li:hover ul{
     
    display: block;
    border-right:none ;
}
 

---

• 这里是用来作为一个简单的回顾 就没有写的特别详细 有哪里不明白的话 都可以在 评论区讲出来
• 重置代码的话 在我另外一篇博客上 大家的要是不一样的话 可以去看一下。
• 谢谢啦