html+css3+jquery带图片的导航下拉特效

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

 

   

     

关于我们 行业考察 产品中心 技术服务 新闻中心 联系我们       

         

         

       

     

   

   

     

       

         

           
• 关于我们1 关于我们2 关于我们3
         

          净世界，美生活。 诚信 专业 激情。

       

         

           
• 行业考察1 行业考察2 行业考察3
         

          诚信 专业 激情。 行业的领跑者。

       

         

           
• 电子功能材料 高性能纤维材料 净化工程 超净产品 医疗产品 护理产品 精密模具
         

          精雕细刻 巧夺天工。 精益求精 无微不至。

       

         

           
• 技术研发 专业测试 技术咨询服务
         

          高新技术产品的研发和生产。 提供优质的品牌产品和服务。

       

         

           
• 基本信息 公司治理 定期报告 临时公告 投资者交流 分析研究报告 股息资料
         

          沟通创造价值。 稳定和可持续发展。

       

         

           
• 人才理念 人才招聘
         

          xxxxxxxxxxxxx。 xxxxxxxxxxx。

     

   

 

书写css代码。* { padding: 0; margin: 0; border: 0; outline: none; list-style-type: none; }em, i { font-style: normal; }a { color: #666; text-decoration: none; }a:hover { color: #066; }body { color: #666; font: 12px/22px 'Simsun', '宋体'; overflow-x: hidden; }.wrapper { width: 1920px; overflow: hidden; position: absolute; left: 50%; top: 0; margin: 0 0 0 -960px; height: 600px; }.topNav { width: 100%; height: 47px; background: url(../images/navbg.png); z-index: 1; }.topNavList { width: 1000px; height: 47px; margin: 0 auto; }.topNavSub { position: relative; }.topNav a { display: block; float: left; height: 47px; line-height: 47px; color: #066; font: 16px/47px 'Microsoft YaHei', 'Simsun', '宋体'; margin: 0 53px 0 13px; padding: 0 7px; }.activeTopNav { background: url(../images/navItemBg_13.png) 0 -1px; }.activeLeft { width: 8px; height: 51px; position: absolute; top: -1px; background: url(../images/navItemBg_12.png); display: none; }.activeRight { width: 10px; height: 51px; position: absolute; top: -1px; background: url(../images/navItemBg_14.png); display: none; }.subNavWrapper { width: 1000px; height: 300px; position: absolute; left: 50%; top: 44px; margin: 0 0 0 -495px; z-index: 1; display: none; }.subNavSet { width: 1000px; height: 300px; margin: 0 auto; position: relative; }.subNav { position: relative; display: none; }.subNav ul { width: 132px; height: 234px; position: absolute; left: 23px; top: 16px; color: #333; font: 14px/30px 'Simsun', '宋体'; }.subNav ul a { width: 130px; display: block; padding: 0 0 0 16px; float: left; color: #333; font: 14px/34px 'Microsoft YaHei', 'Simsun', '宋体'; background: url(../images/arrowSub.png) left center no-repeat; }.subNav ul a:hover { color: #066; text-decoration: underline; }.sub1 { left: 144px; }.sub2 { left: 168px; }.sub3 { left: 262px; }.sub4 { left: 157px; }.sub5 { left: 263px; }.sub0 .subBgTopLeft, .sub1 .subBgTopLeft { width: 706px; height: 7px; display: block; background: url(../images/subTop0.png); }.sub3 .subBgTopLeft { width: 706px; height: 7px; display: block; background: url(../images/subTop3.png); }.sub5 .subBgTopLeft { width: 706px; height: 7px; display: block; background: url(../images/subTop5.png); }.sub0 .subBgBotLeft, .sub1 .subBgBotLeft, .sub3 .subBgBotLeft, .sub5 .subBgBotLeft { width: 706px; height: 206px; display: block; background: url(../images/subBot0.png); }.sub2 .subBgTopLeft { width: 832px; height: 7px; display: block; background: url(../images/subTop2.png); }.sub4 .subBgTopLeft { width: 832px; height: 7px; display: block; background: url(../images/subTop4.png); }.sub2 .subBgBotLeft, .sub4 .subBgBotLeft { width: 832px; height: 206px; display: block; background: url(../images/subBot2.png); }.features { position: absolute; left: 195px; top: 19px; }.features i { width: 174px; display: block; float: left; margin: 0 40px; }.features a:hover img { border: 1px solid #448c8c; }.features i img { display: block; float: left; border: 1px solid #d7d8d8; margin-bottom: 12px; }.features i em { width: 174px; display: block; float: left; line-height: 20px; }

书写并添加js代码。 

代码整体结构。

查看效果。