纯html+css制作三级下拉菜单

直入主题，html+css制作三级下拉菜单实现代码分享给大家，具体内容如下

1.html代码    

1.   
2.   
3.   
4.       
5.       
6.       
7.   
8.   
9.       
10.         
11.   
12.               
13.                 手机数码▼  
14.             
      
    •                 
    •   
    •                     手机 ▶  
    •                       
    •                     
        
      •                         
      • 小米
        
      •                         
      • 华为
        
      •                         
      • 魅族
        
      •                     
        
    •                 
      
    •                 
    •   
    •                     电脑 ▶  
    •                       
    •                     
        
      •                         
      • 平板
        
      •                         
      • 笔记本
        
      •                         
      • 台式
        
      •                     
        
    •                 
      
    •                 
    • 相机
      
    •             
      
15.         
  
16.         
17. 男装女装▼  
18.             
      
    •                 
    •   
    •                     上衣 ▶  
    •                     
        
      •                         
      • 衬衫
        
      •                         
      • T恤
        
      •                     
        
    •                 
      
    •                 
    •   
    •                     裤子 ▶  
    •                     
        
      •                         
      • 牛仔裤
        
      •                         
      • 休闲裤
        
      •                     
        
    •                 
        
    •             
      
19.         
  
20.         
21. 运动户外▼  
22.             
      
    •                 
    • 运动鞋
      
    •                 
    • 运动服
      
    •                 
    • 运动设备
           
    •             
      
23.         
  
24.         
25.   
26.             时尚百货  
27.         
  
28.         
29. 生活服务▼  
30.             
      
    •                 
    • 万能缴费
      
    •                     
        
      •                         
      • 水费
        
      •                         
      • 电费
        
      •                     
        
    •                 
    • 教育培训
           
    •                 
    • 话费充值
      
    •             
      
31.         
  
32.         
33.   
34.                汇吃美食  
35.         
  
36.         
37.   
38.                家居家纺▼  
39.             
      
    •                 
    •   
    •                     ◀ 床上用品  
    •                       
    •                         
    • 被子
      
    •                         
    • 枕头
      
    •                     
      
40.                 
  
41.                 
42.   
43.                     ◀ 客厅家具  
44.                       
45.                         
46. 茶具
  
47.                         
48. 沙发
  
49.                         
50. 椅子
  
51.                       
52.                 
  
53.               
54.         
  
55.       
56.   
57.       

2.CSS 代码

1. *{   
2.         padding: 0;   
3.         margin: 0;         
4.     }   
5.     ul{   
6.         list-style-type:none;   
7.     }   
8.     .triangle{   
9.     
10.         font-size: 1em;   
11.         color: white;    
12.     }   
13.     a{   
14.         text-decoration:none;   
15.         text-align: center;   
16.         font-weight: bold;   
17.     
18.     }   
19.       
20.     ul.nav{   
21.         float: left;   
22.         border:1px solid gray;   
23.         margin-left: 10%;   
24.         margin-top:10px;   
25.         border-radius: 4px;   
26.         position: fixed;   
27.     }   
28.     ul.nav li{   
29.         float: left;   
30.         width: 9em;   
31.         background-color:yellowgreen;   
32.     }   
33.     ul.nav a{   
34.         display: block;   
35.         color: white;   
36.         line-height: 1.5em;   
37.         border-right: 1px solid white;   
38.         border-left: 1px solid white;   
39.         padding: 5px;   
40.     }   
41.     
42.     ul.nav a:hover,   
43.     ul.nav a:focus{   
44.         color: black;   
45.         background-color: #98FB98;   
46.         opacity: 0.5;   
47.     }   
48.     ul.nav li:first-child a{   
49.         border-left: 0;   
50.         border-bottom: 0;   
51.     }   
52.     ul.nav li:last-child a{   
53.         border-right: 0;   
54.         border-bottom: 0;   
55.     }   
56.       
57.     ul.nav li ul{   
58.         width: 10em;           
59.         position: absolute;   
60.         left: -1000em;   
61.     }   
62.         
63.     ul.nav li:hover ul{   
64.         width: 10em;   
65.         left:auto;   
66.     }   
67.         
68.     ul.nav li ul a{   
69.         border-top: 1px solid white;   
70.         border-bottom: 1px solid white;   
71.         border-left: 0;   
72.         border-right: 0;   
73.             
74.     }   
75.       
76.     ul.nav li:hover ul li ul{   
77.         width: 10em;   
78.         position: absolute;   
79.         left: -1000em;   
80.     
81.     }   
82.         
83.     ul.nav li:hover ul li:hover ul{   
84.         left: auto;   
85.         margin-left: 9.1em;   
86.         margin-top: -2.1em;   
87.     }   
88.     ul.nav li:hover ul li:hover ul.nav1{   
89.         left: auto;   
90.         margin-left: -9.1em;   
91.         margin-top: -2.1em;   
92.     }   

以上就是本文的全部内容，欢迎大家学习完善。