⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 template.html

📁 Javascript菜单,使用javascript 和CSS技术
💻 HTML
字号:
🔍 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

  <title>Template</title>
  <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. -->
<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}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end-->

<!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. -->
<style type="text/css">


	/* --[[ Main Expand Icons ]]-- */
	#imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(sample14_main_expand_default.gif); width:13px; height:9px; left:-13px; top:2px; background-repeat:no-repeat;background-position:top left;}
	#imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(sample14_main_expand_on.gif); background-repeat:no-repeat;background-position:top left;}


	/* --[[ Sub Expand Icons ]]-- */
	#imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(sample14_sub_expand_default.gif); width:4px; height:7px; left:-4px; top:3px; background-repeat:no-repeat;background-position:top left;}
	#imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(sample14_sub_expand_on.gif); background-repeat:no-repeat;background-position:top left;}


	/* --[[ Main Container ]]-- */
	#imouter0 {background-color:#555555; background-image:url(sample14_main_bg.gif); border-style:double; border-color:#6a6a6a; border-width:1px; }


	/* --[[ Sub Container ]]-- */
	#imenus0 li ul {background-color:#c0c0c0; border-style:solid; border-color:#333333; border-width:1px; padding:1px; margin:4px 0px 0px; }


	/* --[[ Main Items ]]-- */
	#imenus0 li a, #imenus0 .imctitle {color:#fffff0; text-align:left; font-family:Verdana; font-size:11px; font-weight:bold; text-decoration:none; border-style:outset; border-color:#ffffcc; border-width:1px 2px 2px 1px; padding:4px 9px 4px 4px; }

		/* [hover] - These settings must be duplicated for IE compatibility.*/
		#imenus0 li:hover>a {background-color:#000000; color:#ffffcc; }
		#imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#000000; color:#ffffcc; }

		/* [active] */
		#imenus0 li a.iactive {}


	/* --[[ Sub Items ]]-- */
	#imenus0 ul a, #imenus0 .imsubc li .imctitle  {background-color:#000000; color:#cccccc; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; }

		/* [hover] - These settings must be duplicated for IE comptatibility.*/
		#imenus0 ul li:hover>a {background-color:#555555; color:#ffffff; }
		#imenus0 ul li a.ihover {background-color:#555555; color:#ffffff; }

		/* [active] */
		#imenus0 ul li a.iactive {text-decoration:underline; }


</style><!--end-->

</head>
  <body>







<!--|**START IMENUS**|imenus0,inline-->

<!--  ****** Infinite Menus Structure & Links ***** -->
<div class="imrcmain0 imgl" style="width:140px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm"  style="width:100%;"><a class="" href="#"><span class="imea imeam"><span></span></span>About</a>

	<div class="imsc"><div class="imsubc" style="width:186px;top:-29px;left:136px;"><ul style="">
	<li><a href="#">Corporate Description</a></li>
	<li><a href="#">History</a></li>
	<li><a href="#">Diversity / Inclusion</a></li>
	<li><a href="#">Vision Framework</a></li>
	<li><a href="#">Marketing Resource Center</a></li>
	<li><a href="#">Partnerships</a></li>
	<li><a href="#">Executive Biographies</a></li>
	<li><a href="#">Office Locations</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>What's New</a>

	<div class="imsc"><div class="imsubc" style="width:166px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">General</a></li>
	<li><a href="#">Publications and Presentations</a></li>
	<li><a href="#">Future Events Calendar</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Industries</a>

	<div class="imsc"><div class="imsubc" style="width:155px;top:-28px;left:135px;"><ul style="">
	<li><a href="#"><span class="imea imeas"><span></span></span>Government</a>

		<div class="imsc"><div class="imsubc" style="width:137px;top:-23px;left:153px;"><ul style="border-color:#c0d8f5;border-width:1px;padding:0px;">
		<li><a href="#">Energy</a></li>
		<li><a href="#">Defense</a></li>
		<li><a href="#">Homeland Security</a></li>
		<li><a href="#">State</a></li>
		</ul></div></div></li>


	<li><a href="#"><span class="imea imeas"><span></span></span>Industrial</a>

		<div class="imsc"><div class="imsubc" style="width:150px;top:-21px;left:153px;"><ul style="border-width:0px;padding:1px;">
		<li><a href="#">Commercial &amp; Institutional</a></li>
		<li><a href="#">Life Science</a></li>
		<li><a href="#">Manufacturing</a></li>
		<li><a href="#">Microelectronics</a></li>
		<li><a href="#">Mining</a></li>
		</ul></div></div></li>


	<li><a href="#"><span class="imea imeas"><span></span></span>Infastructure</a>

		<div class="imsc"><div class="imsubc" style="width:132px;top:-22px;left:153px;"><ul style="border-width:0px;padding:1px;">
		<li><a href="#">Transportation</a></li>
		<li><a href="#">Telecommunications</a></li>
		<li><a href="#">Alternative Power</a></li>
		<li><a href="#">Water Resources</a></li>
		</ul></div></div></li>


	<li><a href="#"><span class="imea imeas"><span></span></span>Oil, Gas &amp; Power</a>

		<div class="imsc"><div class="imsubc" style="width:186px;top:-23px;left:153px;"><ul style="border-width:0px;">
		<li><a href="#">Chemicals and Petrochemicals</a></li>
		<li><a href="#">Gas Processing and LNG</a></li>
		<li><a href="#">Gas to Liquids (gtc)</a></li>
		<li><a href="#">Gasification and IGCC</a></li>
		<li><a href="#">Heavy Oil Upgrading and Oil Sands</a></li>
		</ul></div></div></li>


	<li><a href="#">Global Services</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Projects</a>

	<div class="imsc"><div class="imsubc" style="width:145px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">Oil and gas Power</a></li>
	<li><a href="#">Government</a></li>
	<li><a href="#">Industrial</a></li>
	<li><a href="#">Infastructure</a></li>
	<li><a href="#">Global Services</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Careers</a>

	<div class="imsc"><div class="imsubc" style="width:145px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">Welcome</a></li>
	<li><a href="#">Vision Framework</a></li>
	<li><a href="#">Employment</a></li>
	<li><a href="#">College Recruitment</a></li>
	<li><a href="#">Benefits</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a>

	<div class="imsc"><div class="imsubc" style="width:155px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">Company at-a-glance</a></li>
	<li><a href="#">Stock Information</a></li>
	<li><a href="#">Corporate News</a></li>
	<li><a href="#">Corporate Governance</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Communities</a>

	<div class="imsc"><div class="imsubc" style="width:190px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">About Community Relations</a></li>
	<li><a href="#">Contributions Program</a></li>
	<li><a href="#">Educational Outreach</a></li>
	<li><a href="#">Employee Giving</a></li>
	<li><a href="#">Reports</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Media</a>

	<div class="imsc"><div class="imsubc" style="width:154px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">News and Contacts</a></li>
	<li><a href="#">Company Background</a></li>
	<li><a href="#">Media Kit</a></li>
	<li><a href="#">Glossary of Terms</a></li>
	</ul></div></div></li>


<li class="imatm"  style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>HSE</a>

	<div class="imsc"><div class="imsubc" style="width:149px;top:-28px;left:135px;"><ul style="">
	<li><a href="#">About HSE</a></li>
	<li><a href="#">What's New</a></li>
	<li><a href="#">HSE Approach</a></li>
	<li><a href="#">HSE Policy</a></li>
	<li><a href="#">HSE Principles</a></li>
	<li><a href="#">Sustainable Development</a></li>
	</ul></div></div></li>


</ul><div class="imclear">&nbsp;</div></div></div>



<!--|**END IMENUS**|-->







  

<!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. ***

      *Note: This script is required for scripted add on support and IE 6 sub menu functionality.
      *Note: This menu will fully function in all CSS2 browsers with the script removed.-->

<script language="JavaScript" src="ocscript.js" type="text/javascript"></script>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -