国外三级导航下拉菜单 - 网页特效代码演示

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

国外三级导航下拉菜单 - 网页特效代码演示 - 特效代码运行

以下是HTML网页特效代码，点击运行按钮可查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>修改国外的导航下拉菜单-青蛙实战</title>
<style type="text/css">
.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover  .imsubc{visibility:visible;}.imde ul ul ul li:hover  .imsubc{visibility:visible;}.imde li:hover ul  .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul  .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}
/*以上是调浏览器兼容的*/
 #imenus0 .imeam span,#imenus0 .imeamj span {
 width:9px;
 height:6px;
 left:-9px;
 top:5px;
}
 #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {
}
 /* --[[ Sub Expand Icons ]]-- */
 #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(http://www.jsweb8.cn/jsweb8/images/medium_purple_right.gif); width:6px; height:9px; left:-6px; top:6px; background-repeat:no-repeat;background-position:top left;}
 #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(medium_purple_right.gif); background-repeat:no-repeat;background-position:top left;}
 /* --[[ Main Container ]]-- */
 #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; }
 /* --[[ Sub Container ]]-- */
 #imenus0 li ul { padding:5px 0px 0px 0px; margin:-5px 0px 0px 0px; }
  /* [Underlayment (Drop Shadow)] */
  #imenus0 .imunder {top:3px; left:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity:0.50;-moz-opacity:0.50;}
 /* --导航栏目字体以及边框样式-- */
 #imenus0 li a, #imenus0 .imctitle { color:#fff; background-color:#599DDB;text-align:center; font-family:Arial; font-size:13px; font-weight:bold; text-decoration:none;  padding:2px 8px; margin:0px 2px 0px 0px; }
 
  /* [hover] - These settings must be duplicated for IE compatibility.*/
  #imenus0 li:hover>a {text-decoration:none; }
  #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:none; }
  /* [active] */
  #imenus0 li a.iactive {}
 /* -下拉列表样式 */
 #imenus0 ul a, #imenus0 .imsubc li .imctitle  {background-color:#599DDB; color:#fff; text-align:center; font-size:12px; font-weight:bold; text-decoration:none;  padding:2px 5px; height:23px; line-height:23px; border-top:#fff solid 1px; border-left:#fff solid 1px; border-right:#fff solid 1px; border-bottom:none}
  /* [hover] - These settings must be duplicated for IE comptatibility.*/
  #imenus0 ul li a:hover {background-color:#599DDB; text-decoration:none; }
  #imenus0 ul li a.ihover {background-color:#3A8BD3; text-decoration:none; }
  /* [active] */
  #imenus0 ul li a.iactive {background-color:#3A8BD3; }</style>
</head>
<body><div class="imrcmain0 imgl" style="width:600px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0">
  <li class="imatm"  style="width:85px; cursor:pointer"><a class="" href="#">公司简介</a>
    
    <div class="imsc"><div class="imsubc" style="width:120px;top:0px;left:0px;"><div class="imunder"></div><div></div><ul style="">
      <li><a href="http://www.jsweb8.cn"> 世宗概况</a></li>
   <li><a href="http://www.jsweb8.cn">项目业绩</a></li>
   <li><a href="http://www.jsweb8.cn">质量认证</a></li>
   <li><a href="http://www.jsweb8.cn">公司荣誉</a></li>
   <li><a href="http://www.jsweb8.cn">员工风采</a></li>
   <li><a href="http://www.jsweb8.cn">企业文化</a></li>
  
 </ul></div></div>
  </li>
  
  <li class="imatm"  style="width:85px;"><a href="#">产品信息</a>
    
    <div class="imsc"><div class="imsubc" style="width:120px;top:0px;left:-1px;"><div class="imunder"></div><div></div><ul style="">
      <li><a href="http://www.jsweb8.cn">产品简介</a></li>
   <li><a href="http://www.jsweb8.cn">消防联动图例</a></li>
   <li><a href="http://www.jsweb8.cn">产品目录</a></li>
  
 </ul></div></div>
  </li>
  
  <li class="imatm"  style="width:85px;"><a href="#">工程案例</a>
    
    <div class="imsc"><div class="imsubc" style="width:120px;top:0px;left:0px;"><div class="imunder"></div><div></div><ul style="">
      <li><a href="http://www.jsweb8.cn">国内案例</a></li>
   <li><a href="http://www.jsweb8.cn">国外案例</a></li>
   </ul></div></div>
  </li>
  
  <li class="imatm"  style="width:85px;"><a href="#">销售网络</a>
    
    <div class="imsc"><div class="imsubc" style="width:120px;top:0px;left:-1px;"><div class="imunder"></div><div></div><ul style="">
      <li><a href="http://www.jsweb8.cn">销售网一览</a></li>
   <li><a href="http://www.jsweb8.cn">加盟商</a></li>
   <li><a href="http://www.jsweb8.cn">子公司</a></li>
   <li><a href="http://www.jsweb8.cn">办事处</a></li>
   <li><a href="http://www.jsweb8.cn">代理商</a></li>
   </ul></div></div>
  </li>
   <li class="imatm"  style="width:85px;"><a href="#">客户服务</a>
     
     <div class="imsc"><div class="imsubc" style="width:120px;top:0px;left:-1px;"><div class="imunder"></div><div></div><ul style="">
       <li><a href="http://www.jsweb8.cn">售后承诺</a></li>
   <li><a href="http://www.jsweb8.cn">联系技术人员</a></li>
   
<li><a href="http://www.jsweb8.cn"><span class="imea imeas"><span></span></span>技术下载</a>
  
  <div class="imsc"><div class="imsubc" style="width:120px;top:-23px;left:100px;"><div class="imunder"></div><div></div><ul style="">
    <li><a href="http://www.jsweb8.cn" target="_self">设计指南</a></li>
    <li><a href="http://www.jsweb8.cn">产品说明</a></li>
    <li><a href="http://www.jsweb8.cn">CCCF证书及检测</a></li>
    <li><a href="http://www.jsweb8.cn">产品常识</a></li>
    </ul></div></div></li>
   </ul></div></div>
   </li>
  <li class="imatm"  style="width:85px;"><a href="http://www.jsweb8.cn">加盟招聘</a>
    
    <div class="imsc"><div class="imsubc" style="width:120px;top:0px;left:-1px;"><div class="imunder"></div><div></div><ul style="">
      <li><a href="http://www.jsweb8.cn">诚征加盟</a></li>
   <li><a href="http://www.jsweb8.cn">招聘信息</a></li>
   </ul></div></div>
  </li>
   <li class="imatm"  style="width:85px;"><a href="http://www.jsweb8.cn">联系我们</a></li>
  
</ul><div class="imclear"> </div></div></div>
<script language="JavaScript"  src="http://www.jsweb8.cn/jsweb8/ocscript.js"type="text/javascript"></script>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

国外三级导航下拉菜单 - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行