代码如下：
1 2 3 4 5 6 7 8 CSS3菜单仿小米官网菜单 - 何问起 9 10 11 12 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 112 113 114 115 122
查看更多关于小米网css3导航下拉菜单代码_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112056