滑动导航二级菜单

//css样式

.blogNav{width:950px;margin:0 auto; vertical-align:top;}
.blogNav ul li{padding:0;margin:0;}
.blogNav ul li.liTitle{margin:0 auto;width:950px;height:30px;overflow:hidden; margin-top:1px;}
.blogNav ul li.liTitle a{display:block;float:left;color:#fff;font-size:12px;margin:0;width:85px;height:30px;line-height:30px;background:url(../fso_image/nav_tab.jpg) no-repeat;color:#333333;text-align:center; text-decoration:none;}
.blogNav ul li.liTitle a.aImage{width:224px;height:60px;margin:0;padding:0;}
.blogNav ul li.liTitle a.on{background:url(../fso_image/nav_tab1.gif) no-repeat;font-weight:bold;color:#fff; line-height:30px; width:85px;}
.blogNav ul li.liTitle a.off{background:url(../fso_image/nav_tab.jpg) no-repeat;color:#686868; font-weight:bold;}
.blogNav ul li.liContent{margin:0 auto;padding:0;width:950px;height:29px;line-height:29px;color:#fff;font-size:12px;vertical-align:top;}
.blogNav ul li.liContent a:link,.blogNav ul li.liContent a:visited{display:block;float:left;color:#fff;font-size:12px;padding-left:20px;font-size:12px;text-align:center; padding-right:10px; }
.blogNav ul li.liContent a:hover,.blogNav ul li.liContent a:active { color:#fcf0ae; text-decoration:none;}
.blogNav ul li.liSearch{margin:0 auto;width:950px;height:29px;border-top:0;background:url(../fso_image/fso_subnav.jpg) no-repeat;text-align:left;line-height:29px;}
.blogNav ul li.liSearch .subft{padding-left:20px; text-align:left; color:#F00; overflow:hidden;}

 

//页面显示

<div class="blogNav">
<ul>
  <li class="liTitle">
 
  <a href="index.html" class="on" id="mynav1">首页</a>
  <a href="yuming.html" id="mynav2" onmouseover="mover(2);" onmouseout="mout(2);" class="off" >域名注册</a>
  <a href="xunizhuji.html" id="mynav3" onmouseover="mover(3);" onmouseout="mout(3);" class="off" >虚拟主机</a>
  <a href="zuyong.html" id="mynav4" onmouseover="mover(4);" onmouseout="mout(4);" class="off">服务器租用</a>
  <a href="tuoguan.html" id="mynav5" onmouseover="mover(5);" onmouseout="mout(5);" class="off">服务器托管</a>
  <a href="dadaikuan.html" id="mynav6" onmouseover="mover(6);" onmouseout="mout(6);" class="off">大带宽</a>
  <a href="youxiang.html" id="mynav7" onmouseover="mover(7);" onmouseout="mout(7);" class="off">企业邮箱</a>
  <a href="shujuku.html" id="mynav8" onmouseover="mover(8);" onmouseout="mout(8);" class="off">数据库</a>
  <!--<a href="shangwu.html" id="mynav9" onmouseover="mover(9);" onmouseout="mout(9);" class="off" >无线商务</a>-->
  <a href="xxmz.html" id="mynav9" onmouseover="mover(9);" onmouseout="mout(9);" class="off">信息名址</a>
  <a href="sang.html" id="mynav10" onmouseover="mover(10);" onmouseout="mout(10);" class="off">3G商圈</a>
  <a href="ydyx.html" id="mynav11" onmouseover="mover(11);" onmouseout="mout(11);" class="off" >移动营销</a></li>
 
  <li class="liContent">
   <p id="qh_con1" style="DISPLAY: block">
  <span style="padding-left:20px;">欢迎来到光速中国网站，请选择您需要的服务！</span></p>
  <p id="qh_con2" style="DISPLAY: none; padding-left:40px;" onmouseover="mover(2);" onmouseout="mout(2);">
  <a href="yuming.html">英文域名</a>  <a href="ym_zw.html">中文域名</a>  <a href="ym_mg.html">域名自助管理</a>  <a href="ym_zr.html">域名转入</a>  <a href="ym_gh.html">IE8域名过户</a></p>
  <p id="qh_con3" style="DISPLAY: none; padding-left:10px;" onmouseover="mover(3);" onmouseout="mout(3);">
  <a href="xunizhuji_1.html">入门主机系列</a>  <a href="xunizhuji_2.html">商务主机系列</a>  <a href="xunizhuji_3.html">至尊主机系列</a>  <a href="xunizhuji_4.html">独立主机系列</a>  <a href="xunizhuji_5.html">多线双模系列</a>  <a href="xunizhuji_6.html">海外主机系列</a></p>
  <p id="qh_con4" style="DISPLAY: none; padding-left:180px;" onmouseover="mover(4);" onmouseout="mout(4);">
  <a href="zuyong.html">促销系列</a>  <a href="zuyong.html">商翼系列</a>  <a href="zuyong.html">月付系列</a></p>
  <p id="qh_con5" style="DISPLAY: none;padding-left:220px;" onmouseover="mover(5);" onmouseout="mout(5);">
  <a href="tuoguan.html">促销机房</a>  <a href="tuoguan.html">网通机房</a>  <a href="tuoguan.html">电信机房</a> <a href="tuoguan.html">双线机房</a></p>
  <p id="qh_con6" style="DISPLAY: none;padding-left:430px;" onmouseover="mover(6);" onmouseout="mout(6);">
  <a href="dadaikuan.html">大带宽</a> </p>
  <p id="qh_con7" style="DISPLAY: none;padding-left:410px;" onmouseover="mover(7);" onmouseout="mout(7);">
  <a href="youxiang_1.html">普通标准邮</a>  <a href="youxiang_2.html">双模外贸邮</a>  <a href="youxiang_3.html">企业随心邮</a></p>
  <p id="qh_con8" style="DISPLAY: none;padding-left:450px;" onmouseover="mover(8);" onmouseout="mout(8);">
  <a href="shujuku_1.html">MY SQL数据空间</a>  <a href="shujuku_2.html">MS SQL 2000数据空间</a>  <a href="shujuku_3.html">MS SQL 2005数据空间</a></p>
  <!--<p id="qh_con9" style="DISPLAY: none;padding-left:620px;" onmouseover="mover(9);" onmouseout="mout(9);">
  <a href="#">无线商务</a></p>-->
   <p id="qh_con9" style="DISPLAY: none;padding-left:620px;" onmouseover="mover(9);" onmouseout="mout(9);">
  <a href="xxmz_zw.html">中文信息名址</a>  <a href="xxmz_fzw.html">非中文信息名址</a></p>
   <p id="qh_con10" style="DISPLAY: none;padding-left:580px;" onmouseover="mover(10);" onmouseout="mout(10);">
  <a href="xxmz.html">信息名址</a>  <a href="3g_yx.html">营销网站</a>  <a href="3g_yxbb.html">营销版本</a>  <a href="3g_case.html">经典案例</a> </p>
   <p id="qh_con11" style="DISPLAY: none;padding-left:660px;" onmouseover="mover(11);" onmouseout="mout(11);">
  <a href="yx_pt.html">互动平台</a>  <a href="yx_sol.html">行业解决方案</a>  <a href="yx_order.html">个性化定制</a></p>
 
</li>

</ul>
<div class="clear"></div>
</div>

 

<script>

var def="1";
function mover(object){
  //主菜单
  var mm=document.getElementById("mynav"+object);
  mm.className="on";
  //初始主菜单先隐藏效果
  if(def!=0){
    var mdef=document.getElementById("mynav"+def);
    mdef.className="off";
  }
  //子菜单
  var ss=document.getElementById("qh_con"+object);
  ss.style.display="block";
  //初始子菜单先隐藏效果
  if(def!=0){
    var sdef=document.getElementById("qh_con"+def);
    sdef.style.display="none";
  }
}

function mout(object){
  //主菜单
  var mm=document.getElementById("mynav"+object);
  mm.className="off";
  //初始主菜单还原效果
  if(def!=0){
    var mdef=document.getElementById("mynav"+def);
    mdef.className="on";
  }
  //子菜单
  var ss=document.getElementById("qh_con"+object);
  ss.style.display="none";
  //初始子菜单还原效果
  if(def!=0){
    var sdef=document.getElementById("qh_con"+def);
    sdef.style.display="block";
  }
}

</script>

 

显示效果如附件中的图片