HTML+CSS代码橙色导航菜单

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“”，获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果预览：http://hovertree.com/code/texiao/ks63r6aq.htm

 1 <!DOCTYPE html>  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4 <title>超漂亮的HTML导航菜单CSS代码 - 何问起</title>  5 <style>  6  #top {  7  display: block;  8  text-align: left;  9  height: 105px;  10  position: relative;  11  z-index: 0;  12 }  13  14  .m {  15  margin: 0 auto;  16  width: 970px;  17 }  18  19  body {  20  font-size: 12px;  21 }  22  23  a {  24  color: #333;  25  text-decoration: none;  26 }  27  28  a:link {  29  text-decoration: none;  30 }  31 /* Download by http://hovertree.com*/  32  a.blue:link, a.blue:visited {  33  color: #014cc9;  34  text-decoration: none;  35 }  36  37  a.blue:hover, a.blue:active {  38  color: #014cc9;  39  text-decoration: underline;  40 }  41  42  a.org:link, a.org:visited {  43  color: #ff4e00;  44  text-decoration: none;  45 }  46  47  a:hover, a:active, a.org:hover, a.org:active {  48  color: #ff4e00;  49  text-decoration: underline;  50 }  51  52  #navpart {  53  background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;  54  height: 105px;  55  width: 950px;  56  z-index: 0;  57  margin-top: 0;  58  margin-right: auto;  59  margin-bottom: 0;  60  margin-left: auto;  61  clear: both;  62  position: relative;  63 }  64  65  #navpart .sideleft {  66  background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;  67  float: left;  68  height: 105px;  69  width: 6px;  70 }  71  72  #navpart .sideright {  73  background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;  74  float: right;  75  height: 105px;  76  width: 6px;  77 }  78  79  #navmenubar {  80  height: 32px;  81  float: left;  82  display: inline;  83  margin: 0 -6px;  84  width: 100%;  85  position: relative;  86  z-index: 3;  87  top: 0;  88 }  89  90  #hot {  91  background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;  92  height: 21px;  93  width: 19px;  94  position: absolute;  95  top: -5px;  96  right: 2px;  97  z-index: 666;  98  background:black;  99 } 100 101  #navmenubar .sideleft { 102  background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom; 103  float: left; 104  height: 32px; 105  width: 6px; 106  display: inline; 107  margin: 0 0 0 8px; 108 } 109 110  #navmenubar .sideright { 111  background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom; 112  float: left; 113  height: 32px; 114  width: 6px; 115  display: inline; 116  margin: 0 4px 0 -2px; 117 } 118 /* NAVMENU */ 119  #navmenubar .navmenu { 120  background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top; 121  height: 32px; 122  padding: 0; 123  margin: 0; 124  float: left; 125  display: inline; 126 } 127 128  #navmenubar .navmenu li { 129  float: left; 130  white-space: nowrap; 131  margin: 0px; 132  padding: 0px; 133  display: inline; 134 } 135 136  #navmenubar .navmenu li a { 137  background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0; 138  width: 80px; 139  padding: 7px 2px 5px 0; 140  float: left; 141  line-height: 20px; 142  height: 20px; 143  text-align: center; 144 } 145 146  #navmenubar .navmenu li a:hover { 147  background-position: 0 -32px; 148  color: #602800; 149  text-decoration: none; 150  padding: 8px 2px 4px 0; 151 } 152 153  #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover { 154  background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px; 155  font-weight: 600; 156  color: #FFF; 157  font-size: 14px; 158  padding: 7px 2px 5px 0; 159 } 160 161  #top #navpart .content { 162  margin-top: 40px; 163  margin-right: auto; 164  margin-bottom: 0px; 165  margin-left: auto; 166  width: 900px; 167  height: auto; 168  color: white; 169 } 170 171  #top #navpart .content a { 172  color: white; 173  display: inline-block; 174  margin-top: 0px; 175  height: 30px; 176  border: 0px solid white; 177  line-height: 30px; 178  padding: 10px; 179 } 180 181  .clear { 182  clear: both; 183  display: block; 184  font: 0px/0 sans-serif; 185  height: 0px; 186  overflow: hidden; 187 } 188 </style> 189 190 </head> 191 <body> 192 <div id="top" class="m"> 193 <div id="navpart"> 194 <div class="sideleft"></div> 195 <div class="sideright"></div> 196 <!--NavMenu--> 197 <div id="navmenubar"> 198 <div class="sideleft"></div> 199 <ul class="navmenu"> 200 <li class="current"><a href="http://hovertree.com" target="_top" title="首页">何问起</a></li> 201 <li><a href="http://hovertree.com/"><span>编程资源</span></a></li> 202 <li><a href="http://hovertree.com"><span>高质量源码</span></a></li> 203 </ul> 204 <div class="sideright"></div> 205 <div class="sideleft"></div> 206 <ul class="navmenu"> 207 <li><a href="http://tool.hovertree.com"><span>工具</span></a></li> 208 <li><a href="http://hovertree.com/code/"><span>代码</span></a></li> 209 <li><a href="http://keleyi.com"><span>jQuery教程</span></a></li> 210 <li><a href="http://hovertree.com/tiku/"><span>在线题库</span></a></li> 211 </ul> 212 <div class="sideright"></div> 213 <div> 214 <div class="content"> 215 <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/ziyuan/js/" target="_blank">JS运算符优先级</a> 216 <a href="http://hovertree.com/code/texiao/ks63r6aq.htm" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a><a href="http://hovertree.com/hvtart/bjae/e4pya1x0.htm" target="_blank">.NET正则表达式</a> 217 <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="keleyi.com/ziliao/googlejavascriptstyle.htm" target="_blank">谷歌JS风格</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/h/bjaf/nebj8df9.htm" target="_blank">js实现异步循环</a> 218 219 </div> 220 </div> 221 </div> 222 </div> 223 </div> 224 <div class="clear"></div> 225 </body> 226 </html> 227 228