要求：导航栏鼠标经过颜色变成 #f8b62c，离开后变回 #0b77cf，经过下拉栏同理代码实现：
htmlcssjs12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495* { margin: 0; padding: 0;}li { list-style: none; font-family: "Microsoft YaHei";}.nav { background: #0b77cf; height: 46px; width: 100%;}div#menu { color: #fff; width: 1183px; margin: auto; display: block; height: 46px;}div#menu ul { margin: 0px; padding: 0px; list-style: none; float: left; z-index: 2; position: relative;}div#menu li { position: relative; margin: 0px; padding: 0px; display: block; overflow: visible; float: left; z-index: 3; color: #fff;}div#menu li a { height: 46px; display: block; float: left; line-height: 46px; text-decoration: none; color: #fff; overflow: hidden; z-index: 4; position: relative; font-size: 16px;}div#menu li span { color: #fff; display: block; width: 107px; text-align: center; z-index: 6; position: relative; font-size: 16px;}div#menu li li { width: 100%; text-indent: 0px; float: none; height: auto;}div#menu ul { margin: 0px; padding: 0px; list-style: none; float: left; z-index: 2; position: relative;}div#menu ul.menu ul { display: none; padding: 0px 0px 0px; background: #1283e1; width: 107px; position: absolute; top: 46px;}.bgc { background-color: #0b77cf!important;}12345678910111213141516171819202122232425var lis = document.querySelector('.menu').children;for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function () { this.querySelector('span').style.backgroundColor = '#f8b62c' if (this.querySelector('ul')) this.querySelector('ul').style.display = 'block' } lis[i].onmouseout = function () { this.querySelector('span').style.backgroundColor = '' var t = this if (this.querySelector('ul')) { this.querySelector('ul').style.display = 'none' var ulc = this.querySelector('ul').children for (var i = 0; i < ulc.length; i++) { ulc[i].onmouseover = function () { this.querySelector('span').style.backgroundColor = '#f8b62c' t.querySelector('span').className = 'bgc' } ulc[i].onmouseout = function () { this.querySelector('span').style.backgroundColor = '' t.querySelector('span').className = '' } } } }}复杂版htmlcssjs1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606112345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091* { margin: 0; padding: 0;}li { list-style: none; font-family: "Microsoft YaHei";}.nav { background: #0b77cf; height: 46px; width: 100%;}div#menu { color: #fff; width: 1183px; margin: auto; display: block; height: 46px;}div#menu ul { margin: 0px; padding: 0px; list-style: none; float: left; z-index: 2; position: relative;}div#menu li { position: relative; margin: 0px; padding: 0px; display: block; overflow: visible; float: left; z-index: 3; color: #fff;}div#menu li a { height: 46px; display: block; float: left; line-height: 46px; text-decoration: none; color: #fff; overflow: hidden; z-index: 4; position: relative; font-size: 16px;}div#menu li span { color: #fff; display: block; width: 107px; text-align: center; z-index: 6; position: relative; font-size: 16px;}div#menu li li { width: 100%; text-indent: 0px; float: none; height: auto;}div#menu ul { margin: 0px; padding: 0px; list-style: none; float: left; z-index: 2; position: relative;}div#menu ul.menu ul { display: none; padding: 0px 0px 0px; background: #1283e1; width: 107px; position: absolute; top: 46px;}12345678910111213141516171819202122232425var lis = document.querySelector('.menu').children;for (var i = 0; i < lis.length; i++) { var flag = true; lis[i].onmouseover = function () { if (flag) this.querySelector('span').style.backgroundColor = '#f8b62c' if (this.querySelector('ul')) this.querySelector('ul').style.display = 'block' } lis[i].onmouseout = function () { this.querySelector('span').style.backgroundColor = '' var t = this if (!this.querySelector('ul')) return this.querySelector('ul').style.display = 'none' var ulc = this.querySelector('ul').children for (var i = 0; i < ulc.length; i++) { ulc[i].onmouseover = function () { flag = false; this.querySelector('span').style.backgroundColor = '#f8b62c' } ulc[i].onmouseout = function () { flag = true; this.querySelector('span').style.backgroundColor = '' } } }}