如何使用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. 男装女装▼  

  19.             

        

    •                 

    •   

    •                     上衣 ▶  

    •                     

          

      •                         

      • 衬衫
      •   

      •                         

      • T恤
      •   

      •                     

        

    •                 

    •   

    •                 

    •   

    •                     裤子 ▶  

    •                     

          

      •                         

      • 牛仔裤
      •   

      •                         

      • 休闲裤
      •   

      •                     

        

    •                 

    •     

    •             

      

  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.   

  58.                         

  59. 椅子
  60.   

  61.                       

  62.                 

  63.   

  64.               

  65.         

  66.   

  67.       

  68.   

  69.       

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制作三级下拉菜单”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前标题:如何使用html+css制作三级下拉菜单
本文链接:http://scyanting.com/article/ipoooj.html