如何使用html+css制作三级下拉菜单

这篇文章给大家分享的是有关如何使用html+css制作三级下拉菜单的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都网站建设哪家好，找成都创新互联公司！专注于网页设计、重庆网站建设公司、微信开发、小程序制作、集团成都企业网站建设等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：地磅秤等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞赏！

具体内容如下

1.html代码    

XML/HTML Code复制内容到剪贴板

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 代码

CSS Code复制内容到剪贴板

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.     }   

感谢各位的阅读！关于“如何使用html+css制作三级下拉菜单”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！