A nice gradient menu _ navigation menu

A good gradient menu is difficult to modify and the number of images is large. It is very difficult to change the column and add or delete the column. You must change the picture.
Because I have made a lot of changes to this menu, the final effect is the same.
The menu on the original website has more than 80 KB. After modification, the size of the menu is only about 4 kb. Is it much smaller after modification.
The modified feature makes it easy to modify the column name and add or delete columns. The number of pictures is reduced, and only two pictures are required for each column.
People familiar with js can also make it easier and more convenient, but I still don't know much about js, so let's wait for the experts to make it easier!
Note: This effect cannot be achieved in FF. I have not tested other browsers, but only passed the test in IE6.0.

<SCRIPT language = "javascript"> nereidFadeObjects = new Object (); nereidFadeTimers = new Object (); function nereidFade (object, destOp, rate, delta) {if (! Document. all) return if (object! = "[Object]") {setTimeout ("nereidFade (" + object + "," + destOp + "," + rate + "," + delta + ")", 0); return;} clearTimeout (nereidFadeTimers [object. sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object. filters. alpha. opacity> destOp) {direction =-1;} delta = Math. min (direction * diff, delta); object. filters. alpha. opacity + = direction * delta; if (object. filters. alpha. opacity! = DestOp) {nereidFadeObjects [object. sourceIndex] = object; nereidFadeTimers [object. sourceIndex] = setTimeout ("nereidFade (nereidFadeObjects [" + object. sourceIndex + "]," + destOp + "," + rate + "," + delta + ")", rate );}} SCRIPT <style type = "text/css"> <! --. Menu_bg {float: left; width: 80px; height: 25px; line-height: 25px; background-image: url ( http://www.cqgg.com/UploadFiles_15/2007-3/313929821.gif ); Font-size: 12px; color: # ccc; text-align: center ;}. menu_cont {float: left; position: absolute; visibility: visible; background-image: url ( http://www.cqgg.com/UploadFiles_15/2007-3/313380944.gif ); Color: # fff; text-align: center; width: 80px; height: 25px; line-height: 25px; FILTER: alpha (opacity = 0); cursor: pointer; top: 8px! Important; top: 15px ;}} a {font-size: 12px; color: # fff; text-decoration: none ;} --> </style> <p class = "menu_bg"> homepage <p class = "menu_cont" style = "left: 10px;" onmouseover = nereidFade (this, 100,5, 7) onmouseout = nereidFade (this, 01,7, 5)> homepage </p> <p class = "menu_bg"> about us <p class = "menu_cont" style = "left: 90px;" onmouseover = nereidFade (this, 100,5, 7) onmouseout = nereidFade (this, 01,7, 5)> about Us </p> <p class = "menu_bg"> website introduction <p class = "menu_cont" style = "left: 170px; "onmouseover = nereidFade (this, 7) onmouseout = nereidFade (this, 7, 5)> website introduction </p> <p class = "menu_bg"> service project <p class = "menu_cont" style = "left: 250px; "onmouseover = nereidFade (this, 7) onmouseout = nereidFade (this, 7, 5)> service project </p> <p class = "menu_bg"> success stories <p class = "menu_cont" style = "left: 330px; "onmouseover = nereidFade (this, 7) onmouseout = nereidFade (this, 7, 5)> success stories </p> <p class = "menu_bg"> Contact Us <p class = "menu_cont" style = "left: margin PX; "onmouseover = nereidFade (this, 7) onmouseout = nereidFade (this, 7, 5)> contact Us </p> <p class = "menu_bg"> Local Forum <p class = "menu_cont" style = "left: 490px;" onmouseover = nereidFade (this, 100,5, 7) onmouseout = nereidFade (this, 01,7, 5)> local Forum </p> <p class = "menu_bg"> English <p class = "menu_cont" style = "left: 570px;" onmouseover = nereidFade (this, 100,5, 7) onmouseout = nereidFade (this, 01,7, 5)> English </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]