国外三级导航下拉菜单

最新推荐文章于 2021-07-02 19:00:39 发布

流程管理

最新推荐文章于 2021-07-02 19:00:39 发布

阅读量723

点赞数

分类专栏： JS 文章标签： class div 产品 xhtml javascript icons

本文链接：https://blog.youkuaiyun.com/mych/article/details/3339728

版权

JS 专栏收录该内容

30 篇文章

订阅专栏

<!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>