小米网css3导航下拉菜单代码-roucheng

效果：http://hovertree.com/texiao/css3/19/

代码如下：

   1     doctype html  > 
   2      W3C规范   --> 
   3     html   lang  ="zh"  > 
   4      声明   --> 
   5     head  > 
   6     meta   charset  ="UTF-8"  > 
   7      声明当前页面的三要素   --> 
   8     title  > CSS3菜单仿小米官网菜单 - 何问起   title  >  base   target  ="_blank"   /> 
   9     meta   name  ="Keywords"   content  ="关键字,何问起,菜单,CSS3"  > 
  10     meta   name  ="Description"   content  ="描述,hovertree.com,何问起CSS3菜单"  > 
  11      样式   --> 
  12     style   type  ="text/css"  > 
  13   *   { 
  14   margin  :   0px  ; 
  15   padding  :   0px  ; 
  16   } 
  17  
  18   .nav   { 
  19   position  :   relative  ; 
  20   width  :   994px  ; 
  21   height  :   52px  ; 
  22   background  :   #404144  ; 
  23   margin  :   0 auto  ; 
  24   } 
  25  
  26   .nav li   { 
  27   list-style  :   none  ; 
  28   float  :   left  ; 
  29   line-height  :   50px  ; 
  30   } 
  31  
  32   .nav li a   { 
  33   display  :   block  ; 
  34   text-decoration  :   none  ; 
  35   color  :   #FFFFFF  ; 
  36   padding  :   0px 15px  ; 
  37   font-family  :   "微软雅黑"  ; 
  38   } 
  39  
  40   .nav li a:hover .xs   { 
  41   display  :   block  ; 
  42   } 
  43  
  44   .nav li a:hover   { 
  45   background  :   #333333  ; 
  46   } 
  47  
  48   .nav li a .xs   { 
  49   border  :   1px solid #cccccc  ; 
  50   border-top  :   none  ; 
  51   display  :   none  ; 
  52   width  :   992px  ; 
  53   background  :   #FFFFFF  ; 
  54   position  :   absolute  ; 
  55   top  :   50px  ; 
  56   left  :   0px  ; 
  57   } 
  58  
  59   .nav li a .xs .xiao   { 
  60   position  :   absolute  ; 
  61   top  :   -8px  ; 
  62   border-left  :   8px solid transparent  ; 
  63   border-right  :   8px solid transparent  ; 
  64   border-bottom  :   8px solid #FFFFFF  ; 
  65   width  :   0px  ; 
  66   height  :   0px  ; 
  67   z-index  :   999  ; 
  68   } 
  69  
  70   .nav li:nth-child(1) .xiao   { 
  71   left  :   20px  ; 
  72   } 
  73  
  74   .nav li:nth-child(2) .xiao   { 
  75   left  :   98px  ; 
  76   } 
  77  
  78   .nav li:nth-child(3) .xiao   { 
  79   left  :   177px  ; 
  80   } 
  81  
  82   .nav li:nth-child(4) .xiao   { 
  83   left  :   255px  ; 
  84   } 
  85  
  86   .nav li:nth-child(5) .xiao   { 
  87   left  :   348px  ; 
  88   } 
  89  
  90   .nav li:nth-child(6) .xiao   { 
  91   left  :   427px  ; 
  92   } 
  93  
  94   .nav li:nth-child(7) .xiao   { 
  95   left  :   496px  ; 
  96   } 
  97  
  98   .nav li:nth-child(8) .xiao   { 
  99   left  :   576px  ; 
 100   } 
 101  
 102   .nav li:nth-child(9) .xiao   { 
 103   left  :   646px  ; 
 104   } 
 105  
 106   .nav li:nth-child(10) .xiao   { 
 107   left  :   706px  ; 
 108   } 
 109   .hovertreeinfo   { 
 110   text-align  :  center  ;  }   .hovertreeinfo a  {  color  :  blue  ;  } 
 111     style  > 
 112     head  > 
 113  
 114     body  > 
 115     div   class  ="nav"  > 
 116     ul  > 
 117     li  >  a   href  ="http://hovertree.com/h/bjaf/5yh8pnpj.htm"  > 首页   a  >  li  > 
 118     li  > 
 119     a   href  ="http://hovertree.com/"  > 
 120   何问起网
  121     div   class  ="xs"  > 
 122     div   class  ="xiao"  >  div  > 
 123     img   src  ="http://hovertree.com/texiao/css3/19/img/1.jpg"   /> 
 124     div  > 
 125     a  > 
 126     li  > 
 127     li  > 
 128     a   href  ="http://hovertree.com/code/javascript/8lp142er.htm"  > 
 129   红米
  130     div   class  ="xs"  > 
 131     div   class  ="xiao"  >  div  > 
 132     img   src  ="http://hovertree.com/texiao/css3/19/img/2.jpg"   /> 
 133     div  > 
 134     a  > 
 135     li  > 
 136     li  >  a   href  ="http://hovertree.com/h/bjaf/v84hu8e9.htm"  > 小米平板   a  >  li  > 
 137     li  >  a   href  ="http://hovertree.com/code/jquery/qmio0dq9.htm"  > 小米电视   a  >  li  > 
 138     li  > 
 139     a   href  ="http://hovertree.com/h/bjaf/c7d7k8te.htm"  > 
 140   盒子
  141     div   class  ="xs"  > 
 142     div   class  ="xiao"  >  div  > 
 143     img   src  ="http://hovertree.com/texiao/css3/19/img/3.jpg"   /> 
 144     div  > 
 145     a  > 
 146     li  > 
 147     li  > 
 148     a   href  ="http://hovertree.com/h/bjaf/nebj8df9.htm"  > 
 149   路由器
  150     div   class  ="xs"  > 
 151     div   class  ="xiao"  >  div  > 
 152     img   src  ="http://hovertree.com/texiao/css3/19/img/4.jpg"   /> 
 153     div  > 
 154     a  > 
 155     li  > 
 156     li  >  a   href  ="http://hovertree.com/h/bjaf/a1wnr9gs.htm"  > 合约机   a  >  li  > 
 157     li  >  a   href  ="http://hovertree.com/h/bjaf/kqud99m6.htm"  > 服务   a  >  li  > 
 158     li  >  a   href  ="http://hovertree.com/h/bjaf/0i85qaml.htm"  > 社区   a  >  li  > 
 159     ul  > 
 160     div  > 
 161     div   class  ="hovertreeinfo"  > 
 162     a   href  ="http://hovertree.com/h/bjaf/xiaomimenu.htm"  > 原文   a  >     a   href  ="http://hovertree.com"  > 首页   a  >     a   href  ="http://hovertree.com/texiao/"  > 特效   a  > 
 163     div  > 
 164     body  > 
 165     html  >  

查看更多关于小米网css3导航下拉菜单代码-roucheng的详细内容...