js实现兼容性好的微软官网导航下拉菜单效果

本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款微软官网导航菜单，兼容好的下拉菜单，微软官网导航效果，在IE6下没有动画效果，顺便也把IE6的效果给加上，兼容IE6。现在微软的官方网站正在使用，我觉得非常不错。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/

具体代码如下：

body{margin:0px;text-align:left;padding:0px;font:12px/140% Arial,Verdana,"微软雅黑";background:#d1d1d1;}
ul{margin:0px;padding:0px;list-style-type:none;float:left;}
a:focus {outline:0;}
.nav{width:920px;height:28px;background:#f4f4f4;margin:20px auto;border-radius:5px;}
.nav li{width:auto;line-height:20px;float:left;position:relative;}
.nav li.msMnu_Item a{border:1px solid #f4f4f4;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;}
.nav li.msMnu_Item a:hover{border:1px solid #999;background:#e4ecf4;}
.nav li.msMnu_hove a{border:1px solid #999;border-bottom:1px solid #fff;background:#fff;color:#4f4f4f;display:inline-block;padding:3px 10px;position:relative;text-decoration:none;font-size:14px;z-index:1000;}
.list{overflow:hidden;position:absolute;height:0px;top:27px;left:0;border-radius:0 8px 8px 8px;}
.list div{background:#fff;overflow:hidden;padding:12px 0 12px 0;border:1px solid #999;float:left;}
.list ul{padding:0px 10px;}
.list li{margin:0px;padding:0px;width:170px;}
.list li h3{margin:0px;padding:0px;font-size:12px;color:#4f4f4f;border-bottom:1px solid #e3e3e3;line-height:20px;width:100%;float:left;}
.list li ul{width:170px;margin:0px;padding:5px 0;}
.list li ul li.lis a{width:170px;height:22px;color:#0060a6;font-size:12px;line-height:20px;text-decoration:none;margin:0px;padding:0px;text-indent:3px;border:none;}
.list li ul li.lis a:hover{color:#fff;background:#0060a6;}






 

  

  Windows
  
   
   

   

    Windows
    

    
Windows 7
    
Windows Vista
    
Windows XP
    
Windows 企业版
    
Windows Phone
    
Internet Explorer 8
    
   
   
  
  
 
 

  Office
  
  
   

   

    Office 产品
    

    
Office 标准版
    
Office 家庭和学生版
    
Office 中小企业版
    
Office 专业版
    
Office 专业增强版
    
Office 企业版
    
    活动与促销
    

    
Office 近期活动与促销
    
   
   
   

   

    Office 资源
    

    
Office 购买主页
    
Office 试用版免费下载
    
Office for Mac 2011
    
Office Web Apps
    
Office 更新和程序下载
    
   
   
  
  
 
 

  所有产品
  
  
   

   

    服务器
    

    
所有服务器产品
    
Lync Server
    
Windows Server
    
Windows Small Business Server
    
Windows Home Server
    
Windows HPC Server
    
SQL Server
    
   
   
   

   

    商业应用
    

    
UC 统一沟通
    
云计算
    
商业软件平台
    
企业生产力基础架构
    
    开发工具
    

    
Visual Studio 开发工具
    
MSDN 开发人员网站
    
    设计与个人体验
    

    
expression
    
Silverlight
    
   
   
   

   

    个人生活与娱乐产品
    

    
DirectX （英）
    
微软拼音输入法
    
Skype
    
    硬件
    

    
微软硬件首页
    
鼠标
    
键盘
    
    Windows Phone
    

    
Windows Phone 首页
    
应用与下载
    
   
   
  
  
 
 

  下载
  
  
   

   

    下载中心
    

    
微软中国下载中心
    
Windows 下载
    
Office 下载
    
Server 下载
    
Office Marketplace 下载
    
   
   
   

   

    最新下载
    

    
Internet Explorer 8
    
Internet Explorer 9
    
Office 2010 试用版
    
Silverlight
    
Windows 7 Service Pack 1
    
   
   
  
  
 
 

  安全与更新
  
  
   

   

    安全与更新
    

    
安全中心首页
    
Microsoft Update
    
Office Update
    
微软安全软件
    
恶意软件删除工具
    
   
   
  
  
 
 

  培训与支持
  
  
   

   

    产品支持
    

    
帮助与支持首页
    
Windows 帮助
    
Office 帮助
    
TechNet 支持
    
MSDN 支持
    
   
   
   

   

    活动
    

    
微软活动中心
    
培训
    
微软 IT 课堂
    
微软在线培训及认证
    
   
   
  
  
 
 

  立即购买
  
  
   

   

    立即购买
    

    
微软产品选购平台首页
    
个人用户选购平台
    
企业用户选购平台
    
特别优惠
    
批量许可授权
    
   
   
  
  
 
 

  解决方案
  
  
   

   

    合作伙伴解决方案
    

    
查找合作伙伴解决方案
    
    企业和组织
    

    
Microsoft Dynamics ERP & CRM
    
大型企业信息化专区
    
教育信息化专区
    
微软中小企业在线体验中心
    
微软正版授权中心
    
   
   
   

   

    开发人员和 IT 专业人士
    

    
MSDN
    
TechNet
    
IT 专业社区
    
    中国案例中心
    

    
微软中国案例中心
    
    微软技巧与帮助
    

    
微软家庭馆
    
微软工作馆
    
   
   
  
  
 
 

  合作伙伴
  
  
   

   

    合作伙伴
    

    
微软合作伙伴网络
    
查找微软合作伙伴
    
微软合作伙伴网络权益概览
    
加入微软合作伙伴网络（MPN）
    
订阅微软行动宝盒（MAPs）
    
   
   
  
  
 
 

  关于微软
  
  
   

   

    关于微软
    

    
关于微软
    
微软新闻
    
微软在线视频中心
    
投资者关系 (英)
    
招贤纳士
    
   
   
  
  
 
 

希望本文所述对大家的Javascript程序设计有所帮助。