时隐时现的导航菜单脚本

<head>

activateMenu = function(nav) {

/* currentStyle restricts the Javascript to IE only */

if (document.all && document.getElementById(nav).currentStyle) {

var navroot = document.getElementById(nav);

/* Get all the list items within the menu */

var lis=navroot.getElementsByTagName("LI");

for (i=0; i<lis.length; i++) {

/* If the LI has another menu level */

if(lis[i].lastChild.tagName=="UL"){

/* assign the function to the LI */

lis[i].onmouseover=function() {

/* display the inner menu */

this.lastChild.style.display="block";

}

lis[i].onmouseout=function() {

this.lastChild.style.display="none";

}

window.onload= function(){

/* pass the function the id of the top level UL */

/* remove one, when only using one menu */

activateMenu('nav');

// activateMenu('vertnav');

}

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

</script>

<!--

#nav{

list-style: none;

margin-top:-5px !important;

margin-top:0px;

}

#nav ul {

padding: 0;

margin:0;

list-style: none;

z-index:99;

position:relative;

overflow:visible;

}

#nav li {

margin:0;

position: relative;

float:left;

display:block;

height:auto;

background-image: url(//www.canon.com.cn/images/hollow.gif);

}

#nav ul a {

text-decoration:none;

display:block;

line-height:1.5em;

text-indent:0.5em;

font-size: 12px;

background-color: #ffffff;

/*border-right: 1px solid #c50000;

border-bottom: 1px solid #c50000;

border-left: 1px solid #c50000;*/

color: #666666;

border-right: 1px solid #dedede;

border-bottom: 1px solid #dedede;

border-left: 1px solid #dedede;

}

#nav ul a:hover {

background-color: #c50000;

background-color: #dedede;

color: #ffffff;

}

#nav a:hover, #nav li:hover{

}

#nav ul li:hover, #nav ul li a:hover {

}

#nav ul{

display:none;

}

/*all see this */

#nav ul, #nav ul ul{

display:none;

position:absolute;

left: 30px;

}

#nav ul {

left: 22px;

}

#nav ul ul {

left: 91px;

}

/* non-IE browsers see this */

#nav ul li>ul, #nav ul ul li>ul{

margin-top:-1.4em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{

display:none;

}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{

display:block;

}

li>ul {

top: auto;

left: auto;

}

/* 一级栏目 */

#nav a.nav_product,

#nav a.nav_event,

#nav a.nav_support,

#nav a.nav_service,

#nav a.nav_club,

#nav a.nav_canon {

background-image:url(//www.canon.com.cn/front/images/nav_prd.png) !important;

background-image:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=//www.canon.com.cn/front/images/nav_prd.png);

cursor:hand;

background-repeat: no-repeat;

display: block;

line-height: 31px;

width: 64px;

height:30px;

text-indent: -20000px;

border: none;

margin-left: 30px;

}

#nav a.nav_event {

background-image:url(//www.canon.com.cn/front/images/nav_event.png) !important;

background-image:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=//www.canon.com.cn/front/images/nav_event.png);

width:64px;

}

#nav a.nav_support {

background-image:url(//www.canon.com.cn/front/images/nav_sp.png) !important;

background-image:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=//www.canon.com.cn/front/images/nav_sp.png);

}

#nav a.nav_service {

background-image:url(//www.canon.com.cn/front/images/nav_srv.png) !important;

background-image:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=//www.canon.com.cn/front/images/nav_srv.png);

}

#nav a.nav_club {

background-image:url(//www.canon.com.cn/front/images/nav_club.png) !important;

background-image:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=//www.canon.com.cn/front/images/nav_club.png);

width:64px;

}

#nav a.nav_canon {

background-image:url(//www.canon.com.cn/front/images/nav_canon.png) !important;

background-image:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=//www.canon.com.cn/front/images/nav_canon.png);

}

a.cmenu {

background-image: url(../images/cmenu_hover.gif);

background-repeat: no-repeat;

background-position: right center;

}

ul#nav ul {

width: 90px;

}

ul#nav ul ul {

margin-top: -1px;

}

ul#nav ul li a {

width: 90px;

}

ul#nav ul {

border-top-width: 1px;

border-top-style: solid;

/*border-top-color: #ffffff;margin-top: -1px;*/

border-top-color: #c50000;

z-index: 200;

}

ul#nav ul ul {

top: 0px;

border-top-width: 1px;

border-top-style: solid;

/*border-top-color: #c50000;*/

border-top-color: #dedede;

}

ul#nav ul ul li a {

width: 150px;

}

ul#nav ul#sm_prd ul li a {

width: 140px;

}

ul#nav ul#sm_sp ul li a,

ul#nav ul#sm_club ul li a {

width: 90px;

}

ul#nav ul#sm_club a {

width: 105px;

}

ul#nav ul#sm_club ul {

left: 106px;

}

ul#nav ul#sm_canon {

left: 5px;

}

ul#nav ul#sm_canon ul li a {

width: 80px;

}

ul#nav ul#sm_canon ul {

left: -81px;

}

ul#sm_prd ul.ntb,

ul#sm_sp ul.ntb,

ul#sm_srv ul.ntb,

ul#sm_club ul.ntb,

ul#sm_canon ul.ntb {

border-top-style: none;

margin-top: 1px;

}

ul#sm_prd ul.supply {

margin-top: -190px;

}

-->

</style>

</head>

<body>

<li><a href="/front/product/cat19.html">EOS胶片单反相机</a> </li>

<li><a href="/front/product/cat20.html">EOS数码单反相机</a> </li>

<li><a href="/front/product/cat71.html">PowerShot数码相机</a> </li>

<li><a href="/front/product/cat21.html">IXUS数码相机</a> </li>

<li><a href="/front/product/cat22.html">PRIMA小霹雳</a></li>

<li><a href="/front/product/cat24.html">EF系列镜头</a> </li>

</ul>

</li>

<li><a href="#" class="cmenu">数码摄像机</a>

<ul>

<li><a href="/front/product/cat117.html">DVD摄像机</a></li>

<li><a href="/front/product/cat72.html">普及型数码摄像机</a></li>

<li><a href="/front/product/cat81.html">专业级数码摄像机</a></li>

<li><a href="/front/product/cat118.html">专业级高清摄像机</a></li>

</ul>

</li>

<ul>

<li><a href="/front/product/cat39.html">PIXMA喷墨照片打印机</a> </li>

<li><a href="/front/product/cat35.html">PIXMA多功能数码打印机</a></li>

<li><a href="/front/product/cat36.html">LASERSHOT激光打印机</a> </li>

<li><a href="/front/product/cat37.html">Selphy直接照片打印机</a> </li>

<li><a href="/front/product/cat38.html">商用彩色喷墨打印机</a> </li>

</ul>

</li>

<ul>

<li><a href="/front/product/cat42.html">时尚照片扫描仪</a> </li>

<li><a href="/front/product/cat43.html">专业影像扫描仪</a> </li>

<li><a href="/front/product/cat44.html">专业高速文件扫描仪</a> </li>

</ul>

</li>

<ul>

<li><a href="/front/product/cat49.html">激光多功能一体机</a> </li>

<li><a href="/front/product/cat106.html">PIXMA多功能数码打印机</a> </li>

</ul>

</li>

<ul>

<li><a href="/front/product/cat51.html">喷墨普通纸传真机</a> </li>

<li><a href="/front/product/cat50.html">色带普通纸传真机</a> </li>

<li><a href="/front/product/cat52.html">激光普通纸传真机</a></li>

</ul>

</li>

<li><a href="#" class="cmenu">专业打印设备</a>

<ul>

<li><a href="/front/product/cat54.html">卡片打印机</a> </li>

<li><a href="/front/product/cat55.html">大幅面打印机</a> </li>

</ul>

</li>

<li><a href="/front/product/cat53.html">小型复印机</a></li>

<ul>

<li><a href="/front/product/cat47.html">彩色数码复合机</a> </li>

<li><a href="/front/product/cat48.html">黑白数码复合机</a> </li>

</ul>

</li>

</ul>

</li>

<li><a href="/front/support/majorclients/index.jsp" class="cmenu">大客户采购</a>

<ul>

</ul>

</li>

<ul>

<li><a href="/front/support/gov/reference.jsp">政府采购参考</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<ul>

<li><a href="/front/club/digispace/training.jsp">EOS数码相机<br /> 用户培训</a></li>

</ul>

</li>

<ul>

<li><a href="/front/club/activity/index.jsp">精彩活动回顾</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<li><a href="//www.canon.com.cn/canonbaseball/" target="_blank">佳能棒球馆</a></li>

<li><a href="//www.canon.com.cn/tennis/" target="_blank">佳能与莎拉波娃</a></li>

<li><a href="//www.canon.com.cn/csl/" target="_blank">佳能与中超</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="/front/canon/inchina/intro.jsp" class="cmenu">佳能在中国</a>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>