自从硬盘挂掉,便病态地追求备份.所以,这只是我一个人的玩具,关闭了注册功能.不过,还是有说话机会的.
You are not logged in.
Pages: 1
标准的xhtml+css无JS的三级下拉菜单 <!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>标准的xhtml+css无JS的三级下拉菜单（cssplay)-JS特效学院-Jsweb8.Cn</title> </head> <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_variations.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ /* common styling */ /* Set up the default font and ovrall size to include image */ body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } /* style the outer div to give it width */ .menu {font-size:12px; padding:0 0 200px 15px; width:700px;} /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type:none; height:25px; background:transparent;} /* style the sub-level lists */ .menu ul ul {width:625px;} /* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */ .menu ul li {float:left; height:25px; line-height:24px; display:block; margin-right:2px;} /* style the sub level list items */ .menu ul ul li {display:block; width:150px; height:auto; line-height:1em;} .menu ul ul li.last {padding-bottom:10px; background:url(http://www.jsweb8.cn/jsweb8/images/sub_bottom.gif) bottom left no-repeat;} .menu ul ul ul li.last {padding-bottom:10px; background:url(http://www.jsweb8.cn/jsweb8/images/two_bottom.gif) bottom left no-repeat;} .menu ul ul ul ul li.last {padding-bottom:10px; background:url(http://www.jsweb8.cn/jsweb8/images/three_bottom.gif) bottom left no-repeat;} /* style the links for the top level */ .menu a, .menu a:visited {display:block; float:left; height:24px; width:115px; font-size:10px; text-decoration:none; color:#000; background:#fff url(http://www.jsweb8.cn/jsweb8/images/top.gif); padding:0 0 0 10px; text-align:left;border:0; border-bottom:1px solid #222;} /* hack IE5.x to get the correct the faulty box model and get the width right */ * html .menu a, * html .menu a:visited {width:125px; w\idth:115px;} /* style the sub level links */ .menu ul ul a, .menu ul ul a:visited {display:block;background:#699; color:#fff;width:128px; height:100%; line-height:1em; padding:5px 10px; border:1px solid #000; border-width:0 1px;} * html .menu ul ul a, * html .menu ul ul a:visited {width:150px; w\idth:128px;} /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {border-collapse:collapse; padding:0; margin:-1px; width:0; height:0; font-size:1em; z-index:1;} /* style the third level background */ .menu ul ul ul a, .menu ul ul ul a:visited {background:#c99;} /* style the fourth level background */ .menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#c96;} /* style the sub level 1 background */ .menu ul :hover a.sub1 {background:#477;} /* style the sub level 2 background */ .menu ul ul :hover a.sub2 {background:#a77;} /* style the level hovers */ /* first */ * html .menu a:hover {color:#ff0; border:0; height:25px; position:relative; z-index:100;} .menu li:hover {position:relative;} .menu :hover > a {color:#ff0; border:0; height:25px;} /* second */ * html .menu ul ul a:hover{color:#ff0; background:#477; position:relative; z-index:110; height:100%; border:1px solid #000; border-width:0 1px;} .menu ul ul li:hover {position:relative;} .menu ul ul :hover > a {color:#ff0;background:#7aa;background:#477; z-index:110; height:100%; border:1px solid #000; border-width:0 1px;} /* third */ * html .menu ul ul ul a:hover {background:#a77; position:relative; z-index:120;} .menu ul ul ul :hover > a {background:#a77;} /* fourth */ .menu ul ul ul ul a:hover {background:#a75; position:relative; z-index:130;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;height:0; top:25px; left:0; width:150px;} /* position the third level flyout menu */ .menu ul ul ul{top:-10px; width:150px;} /* make the second level visible when hover on first level list OR link */ .menu ul :hover ul {visibility:visible; height:auto; padding:15px 30px 30px 30px; background:transparent url(http://www.jsweb8.cn/jsweb8/images/sub_top.gif) 30px 0 no-repeat; left:-30px;} .menu ul :hover ul.left {visibility:visible; height:auto; padding:15px 30px 30px 30px; background:transparent url(http://www.jsweb8.cn/jsweb8/images/sub_top_left.gif) 30px 0 no-repeat; left:-55px;} /* keep the third level hidden when you hover on first level list OR link */ .menu ul :hover ul ul{visibility:hidden;} /* keep the fourth level hidden when you hover on second level list OR link */ .menu ul :hover ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ .menu ul :hover ul :hover ul{visibility:visible; left:90px; height:auto; padding:10px 30px 30px 30px; background:transparent url(http://www.jsweb8.cn/jsweb8/images/two_top.gif) 30px 0 no-repeat;} .menu ul :hover ul.left :hover ul {left:-150px;} /* make the fourth level visible when you hover over third level list OR link */ .menu ul :hover ul :hover ul :hover ul {visibility:visible; left:90px; height:auto; padding:10px 30px 30px 30px; background:transparent url(http://www.jsweb8.cn/jsweb8/images/three_top.gif) 30px 0 no-repeat;} </style> <body> <div class="menu"> <ul> <li><a href="http://www.jsweb8.cn/">JS特效学院<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="sub1" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li><a class="sub2" href="#nogo">FLYOUT third level<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#nogo">Third level-1</a></li> <li><a href="#nogo">Third level-2</a></li> <li><a href="#nogo">Third level-3</a></li> <li class="last"><a href="#nogo">Third level-4</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="last"><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li class="last"><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li class="last"><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li class="last"><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li class="last"><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left"> <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li class="last"><a class="sub1" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> <li class="last"><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>
Offline
纯CSS竖向三级弹出菜单 <!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>flyout-竖向三级弹出菜单J----S特效学院-JSWEB8.CN</title> <style type="text/css"> /* common styling */ .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#eee; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} </style> <!--[if lte IE 6]> <style type="text/css"> .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#eee; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} </style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </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>多功能的下拉层样式的选项卡(cssplay)-JS特效学院-jsweb8.cn</title> </head> <style type="text/css"> /* common styling */ /* Set up the default font and ovrall size to include image */ body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } #lists {padding:0; margin:25px 0 50px 15px; list-style:none; position:relative; height:25px; float:left; background:url(http://www.jsweb8.cn/jsweb8/images/line.gif) no-repeat 100% 4px; width:600px; z-index:500;} /* margins for this demonstration only */ #lists li {display:inline; float:left;; height:25px; background:url(http://www.jsweb8.cn/jsweb8/images/line.gif) no-repeat 0 4px;} #lists li a.tl {display:block; width:150px; height:25px; text-decoration:none; line-height:20px; font-size:12px; font-weight:bold; text-indent:10px; font-weight:normal; color:#000; background:url(http://www.jsweb8.cn/jsweb8/images/white_arrow.gif) no-repeat 130px 5px;} #lists div {display:none;} #lists li a:hover {text-decoration:underline; white-space:normal; background-position:130px 15px;} #lists li:hover > a {text-decoration:underline; white-space:normal; background-position:130px 15px;} #lists :hover div {display:block; width:598px; background:#faebd7; position:absolute; left:0; top:25px; border:1px solid #888; padding-bottom:10px;} #lists :hover div.pos2 {background:#f0f5ee;} #lists .two:hover {position:relative;} #lists .single:hover {position:relative;} #lists .two:hover div.pos3 {background:#f5eef0; width:300px;} #lists .single:hover div.pos4 {background:#ffefd5; width:150px;} #lists :hover div dl {display:inline; padding:0; margin:0 10px 10px 10px; float:left; width:179px;} #lists :hover div dl dt {width:179px; background:#888; text-indent:10px; margin:5px 0 10px 0; text-decoration:none; height:20px; line-height:20px;} #lists .two:hover div {left:-150px;} #lists .two:hover div dl {width:129px;} #lists .two:hover div dl dt {width:129px;} #lists .single:hover div dl {width:129px;} #lists .single:hover div dl dt {width:129px;} #lists :hover div dl dd {padding:0; margin:0;} #lists :hover div dt a {text-decoration:none; cursor:default; font-weight:normal; color:#fff;} #lists :hover div dd a {display:block; text-decoration:none; font-weight:normal; font-size:11px; color:#000; text-indent:10px; line-height:15px;} #lists :hover div dd a:hover {text-decoration:underline;} #lists .clear {clear:both;} </style> <body> <ul id="lists"> <li><a href="#nogo" class="tl">USA States<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="pos1"> <dl> <dt><a href="#nogo">Group one</a></dt> <dd><a href="#nogo">Alabama</a></dd> <dd><a href="#nogo">Alaska</a></dd> <dd><a href="#nogo">Arizona</a></dd> <dd><a href="#nogo">Arkansas</a></dd> <dd><a href="#nogo">California</a></dd> <dd><a href="#nogo">Colorado</a></dd> <dd><a href="#nogo">Connecticut</a></dd> <dd><a href="#nogo">D.C.</a></dd> </dl> <dl> <dt><a href="#nogo">Group two</a></dt> <dd><a href="#nogo">Delaware</a></dd> <dd><a href="#nogo">Florida</a></dd> <dd><a href="#nogo">Georgia</a></dd> <dd><a href="#nogo">Hawaii</a></dd> <dd><a href="#nogo">Idaho</a></dd> <dd><a href="#nogo">Illinois</a></dd> <dd><a href="#nogo">Indiana</a></dd> <dd><a href="#nogo">Iowa</a></dd> <dd><a href="#nogo">Kansas</a></dd> <dd><a href="#nogo">Kentucky</a></dd> </dl> <dl> <dt><a href="#nogo">Group three</a></dt> <dd><a href="#nogo">Louisiana</a></dd> <dd><a href="#nogo">Maine</a></dd> <dd><a href="#nogo">Maryland</a></dd> <dd><a href="#nogo">Massachusetts</a></dd> <dd><a href="#nogo">Michigan</a></dd> <dd><a href="#nogo">Minnesota</a></dd> <dd><a href="#nogo">Mississippi</a></dd> <dd><a href="#nogo">Missouri</a></dd> <dd><a href="#nogo">Montana</a></dd> </dl> <br class="clear" /> <dl> <dt><a href="#nogo">Group four</a></dt> <dd><a href="#nogo">Nebraska</a></dd> <dd><a href="#nogo">Nevada</a></dd> <dd><a href="#nogo">New Hampshire</a></dd> <dd><a href="#nogo">New Jersey</a></dd> <dd><a href="#nogo">New Mexico</a></dd> <dd><a href="#nogo">New York</a></dd> <dd><a href="#nogo">North Carolina</a></dd> </dl> <dl> <dt><a href="#nogo">Group five</a></dt> <dd><a href="#nogo">North Dakota</a></dd> <dd><a href="#nogo">Ohio</a></dd> <dd><a href="#nogo">Oklahoma</a></dd> <dd><a href="#nogo">Oregon</a></dd> <dd><a href="#nogo">Pennsylvania</a></dd> <dd><a href="#nogo">Rhode Island</a></dd> <dd><a href="#nogo">South Carolina</a></dd> <dd><a href="#nogo">South Dakota</a></dd> </dl> <dl> <dt><a href="#nogo">Group six</a></dt> <dd><a href="#nogo">Tennessee</a></dd> <dd><a href="#nogo">Texas</a></dd> <dd><a href="#nogo">Utah</a></dd> <dd><a href="#nogo">Vermont</a></dd> <dd><a href="#nogo">Virginia</a></dd> <dd><a href="#nogo">Washington</a></dd> <dd><a href="#nogo">West Virginia</a></dd> <dd><a href="#nogo">Wisconsin</a></dd> <dd><a href="#nogo">Wyoming</a></dd> </dl> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo" class="tl">UK Counties<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="pos2"> <dl> <dt><a href="#nogo">Group one</a></dt> <dd><a href="#nogo">Aberdeenshire</a></dd> <dd><a href="#nogo">Anglesey</a></dd> <dd><a href="#nogo">Angus</a></dd> <dd><a href="#nogo">Antrim</a></dd> <dd><a href="#nogo">Argyllshire</a></dd> <dd><a href="#nogo">Armagh</a></dd> <dd><a href="#nogo">Ayrshire</a></dd> <dd><a href="#nogo">Banffshire</a></dd> </dl> <dl> <dt><a href="#nogo">Group two</a></dt> <dd><a href="#nogo">Bedfordshire</a></dd> <dd><a href="#nogo">Berkshire</a></dd> <dd><a href="#nogo">Berwickshire</a></dd> <dd><a href="#nogo">Brecknockshire</a></dd> <dd><a href="#nogo">Buckinghamshire</a></dd> <dd><a href="#nogo">Buteshire</a></dd> <dd><a href="#nogo">Caernarfonshire</a></dd> <dd><a href="#nogo">Caithness</a></dd> <dd><a href="#nogo">Cambridgeshire</a></dd> </dl> <dl> <dt><a href="#nogo">Group three</a></dt> <dd><a href="#nogo">Cardiganshire</a></dd> <dd><a href="#nogo">Carmarthenshire</a></dd> <dd><a href="#nogo">Cheshire</a></dd> <dd><a href="#nogo">Clackmannanshire</a></dd> <dd><a href="#nogo">Cornwall</a></dd> <dd><a href="#nogo">Cromartyshire</a></dd> <dd><a href="#nogo">Cumberland</a></dd> <dd><a href="#nogo">Denbighshire</a></dd> <dd><a href="#nogo">Derbyshire</a></dd> </dl> <br class="clear" /> <dl> <dt><a href="#nogo">Group four</a></dt> <dd><a href="#nogo">Devon</a></dd> <dd><a href="#nogo">Dorset</a></dd> <dd><a href="#nogo">Down</a></dd> <dd><a href="#nogo">Dumfriesshire</a></dd> <dd><a href="#nogo">Dunbartonshire</a></dd> <dd><a href="#nogo">Durham</a></dd> <dd><a href="#nogo">East Lothian</a></dd> <dd><a href="index.html">Essex</a></dd> <dd><a href="#nogo">Fermanagh</a></dd> </dl> <dl> <dt><a href="#nogo">Group five</a></dt> <dd><a href="#nogo">Fife</a></dd> <dd><a href="#nogo">Flintshire</a></dd> <dd><a href="#nogo">Glamorgan</a></dd> <dd><a href="#nogo">Gloucestershire</a></dd> <dd><a href="#nogo">Hampshire</a></dd> <dd><a href="#nogo">Herefordshire</a></dd> <dd><a href="#nogo">Hertfordshire</a></dd> <dd><a href="#nogo">Huntingdonshire</a></dd> <dd><a href="#nogo">Inverness-shire</a></dd> </dl> <dl> <dt><a href="#nogo">Group six</a></dt> <dd><a href="#nogo">Kent</a></dd> <dd><a href="#nogo">Kincardineshire</a></dd> <dd><a href="#nogo">Kinross</a></dd> <dd><a href="#nogo">Kirkcudbrightshire</a></dd> <dd><a href="#nogo">Lanarkshire</a></dd> <dd><a href="#nogo">Lancashire</a></dd> <dd><a href="#nogo">Leicestershire</a></dd> <dd><a href="#nogo">Lincolnshire</a></dd> <dd><a href="#nogo">Londonderry</a></dd> </dl> <br class="clear" /> <dl> <dt><a href="#nogo">Group seven</a></dt> <dd><a href="#nogo">Merioneth</a></dd> <dd><a href="#nogo">Middlesex</a></dd> <dd><a href="#nogo">Midlothian</a></dd> <dd><a href="#nogo">Monmouthshire</a></dd> <dd><a href="#nogo">Montgomeryshire</a></dd> <dd><a href="#nogo">Morayshire</a></dd> <dd><a href="#nogo">Nairnshire</a></dd> <dd><a href="#nogo">Norfolk</a></dd> <dd><a href="#nogo">Northamptonshire</a></dd> </dl> <dl> <dt><a href="#nogo">Group eight</a></dt> <dd><a href="#nogo">Northumberland</a></dd> <dd><a href="#nogo">Nottinghamshire</a></dd> <dd><a href="#nogo">Orkney</a></dd> <dd><a href="#nogo">Oxfordshire</a></dd> <dd><a href="#nogo">Pembrokeshire</a></dd> <dd><a href="#nogo">Peeblesshire</a></dd> <dd><a href="#nogo">Perthshire</a></dd> <dd><a href="#nogo">Radnorshire</a></dd> <dd><a href="#nogo">Renfrewshire</a></dd> </dl> <dl> <dt><a href="#nogo">Group nine</a></dt> <dd><a href="#nogo">Ross-shire</a></dd> <dd><a href="#nogo">Roxburghshire</a></dd> <dd><a href="#nogo">Rutland</a></dd> <dd><a href="#nogo">Selkirkshire</a></dd> <dd><a href="#nogo">Shetland</a></dd> <dd><a href="#nogo">Shropshire</a></dd> <dd><a href="#nogo">Somerset</a></dd> <dd><a href="#nogo">Staffordshire</a></dd> <dd><a href="#nogo">Stirlingshire</a></dd> </dl> <br class="clear" /> <dl> <dt><a href="#nogo">Group ten</a></dt> <dd><a href="#nogo">Suffolk</a></dd> <dd><a href="#nogo">Surrey</a></dd> <dd><a href="#nogo">Sussex</a></dd> <dd><a href="#nogo">Sutherland</a></dd> <dd><a href="#nogo">Tyrone</a></dd> <dd><a href="#nogo">Warwickshire</a></dd> <dd><a href="#nogo">West Lothian</a></dd> <dd><a href="#nogo">Westmorland</a></dd> <dd><a href="#nogo">Wigtownshire</a></dd> </dl> <dl> <dt><a href="#nogo">Group eleven</a></dt> <dd><a href="#nogo">Wiltshire</a></dd> <dd><a href="#nogo">Worcestershire</a></dd> <dd><a href="#nogo">Yorkshire</a></dd> </dl> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="single"><a href="#nogo" class="tl single">Useful CSS Links<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="pos4"> <dl> <dt><a href="nogo">CSS Showcase</a></dt> <dd><a href="#nogo">Your website here</a></dd> <dd><a href="#nogo">Your website here</a></dd> </dl> <dl> <dt><a href="nogo">CSS Navigation</a></dt> <dd><a href="#nogo">Your website here</a></dd> </dl> <dl> <dt><a href="nogo">CSS Layouts</a></dt> <dd><a href="#nogo">Your website here</a></dd> <dd><a href="#nogo">Your website here</a></dd> <dd><a href="#nogo">Your website here</a></dd> </dl> <dl> <dt><a href="nogo">CSS Blogs</a></dt> <dd><a href="#nogo">Your website here</a></dd> </dl> <dl> <dt><a href="nogo">CSS Hacks</a></dt> <dd><a href="#nogo">Your website here</a></dd> <dd><a href="#nogo">Your website here</a></dd> <dd><a href="#nogo">Your website here</a></dd> </dl> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="two"><a href="#nogo" class="tl two">Cameras<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="pos3"> <dl> <dt><a href="nogo">Nikon</a></dt> <dd><a href="#nogo">Digital D2Xs</a></dd> <dd><a href="#nogo">Digital D2Hs</a></dd> <dd><a href="#nogo">Digital D200</a></dd> <dd><a href="#nogo">Digital D80</a></dd> <dd><a href="#nogo">Digital D40x</a></dd> <dd><a href="#nogo">Digital Coolpix</a></dd> <dd><a href="#nogo">SLR F6</a></dd> <dd><a href="#nogo">SLR FM10</a></dd> <dd><a href="#nogo">Wideangle</a></dd> <dd><a href="#nogo">Telephoto</a></dd> <dd><a href="#nogo">Teleconverters</a></dd> <dd><a href="#nogo">Speedlights</a></dd> <dd><a href="#nogo">Coolscan</a></dd> </dl> <dl> <dt><a href="nogo">Canon</a></dt> <dd><a href="#nogo">Digital IXUS</a></dd> <dd><a href="#nogo">Digital EOS-1Ds</a></dd> <dd><a href="#nogo">Digital EOS-5D</a></dd> <dd><a href="#nogo">Digital EOS-30D</a></dd> <dd><a href="#nogo">Digital EOS-400D</a></dd> <dd><a href="#nogo">Powershot</a></dd> <dd><a href="#nogo">Film EOS-300X</a></dd> <dd><a href="#nogo">Film EOS-300V</a></dd> <dd><a href="#nogo">Sureshot</a></dd> <dd><a href="#nogo">Macro</a></dd> <dd><a href="#nogo">Extenders</a></dd> <dd><a href="#nogo">Speedlights</a></dd> <dd><a href="#nogo">Motor Drives</a></dd> <dd><a href="#nogo">Focusing Screens</a></dd> </dl> <dl> <dt><a href="nogo">Pentax</a></dt> <dd><a href="#nogo">Optio A30</a></dd> <dd><a href="#nogo">Optio T30</a></dd> <dd><a href="#nogo">Optio S7</a></dd> <dd><a href="#nogo">Optio W30</a></dd> <dd><a href="#nogo">Digital K10D</a></dd> <dd><a href="#nogo">Digital K110D</a></dd> <dd><a href="#nogo">Pentax *istDL2</a></dd> <dd><a href="#nogo">645NII</a></dd> <dd><a href="#nogo">AF-540 FGZ</a></dd> <dd><a href="#nogo">KB zoom</a></dd> <dd><a href="#nogo">KB macro</a></dd> </dl> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </body> </html>
无JS的XHTML上拉菜单 <!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>无JS的XHTML上拉菜单（cssplay）</title> </head> <style type="text/css"> /* Set up the default font and ovrall size to include image */ body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } .menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; position:relative;} .menu ul li ul {visibility:hidden; position:absolute;} .menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em; margin:-1px;} .menu ul li:hover a, .menu ul li a:hover {color:#000; background:#e9e9c7;} .menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; bottom:26px; left:0;} .menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;} .menu ul li:hover ul li, .menu ul li a:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} .menu ul li:hover ul li:hover a.sub, .menu ul li a:hover ul li a:hover.sub {background:#dfc184; color:#000;} .menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {visibility:hidden; position:absolute;} .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {visibility:visible; left:210px; bottom:0;} .menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li:hover ul.left, .menu ul li a:hover ul.left {left:-105px;} .menu ul li:hover ul li:hover ul.left, .menu ul li a:hover ul li a:hover ul.left {left:-210px; width:209px;} </style> <body> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="menu"> <ul> <li><a href="http://www.jsweb8.cn">DEMOS<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.jsweb8.cn" title="The zero dollar ads page">zero dollars</a></li> <li><a href="http://www.jsweb8.cn" title="Wrapping text around images">wrapping text</a></li> <li><a href="http://www.jsweb8.cn" title="Styling forms">styled form</a></li> <li><a href="http://www.jsweb8.cn" title="Removing active/focus borders">active focus</a></li> <li><a class="sub" href="http://www.jsweb8.cn" title="Hover/click with no active/focus borders">HOVER/CLICK ><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.jsweb8.cn" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="http://www.jsweb8.cn" title="Image Map for detailed information">image map</a></li> <li><a href="http://www.jsweb8.cn" title="fun with background images">fun backgrounds</a></li> <li><a href="http://www.jsweb8.cn" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="index.html">MENUS<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../layouts/index.html">LAYOUTS<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">BOXES<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/index.html">MOZILLA<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../ie/index.html">EXPLORER<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../opacity/index.html">OPACITY<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left"> <li><a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="left"> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </body> </html>
精致的黑色竖向2级菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>精致的黑色竖向2级菜单-JS特效学院|JSWEB8.CN</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(http://www.jsweb8.cn/jsweb8/images/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(http://www.jsweb8.cn/jsweb8/images/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(http://www.jsweb8.cn/jsweb8/images/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(http://www.jsweb8.cn/jsweb8/images/sample14_sub_expand_on.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#555555; background-image:url(http://www.jsweb8.cn/jsweb8/images/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 & 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 & 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"> </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 type="text/javascript"> function imenus_data0(){ this.menu_showhide_delay = 150 this.show_subs_onclick = false this.hide_focus_box = false /*--------------------------------------------- IE Transition Effects ---------------------------------------------*/ this.subs_ie_transition_show = "filter:progid:DXImageTransform.Microsoft.Fade(duration=0.3);" /*[end data]*/} //[IM Code] // ---- Add-On [0.7 KB]: Select Tag Fix for IE ---- ;function iao_iframefix(){if(ulm_ie&&!ulm_mac&&!ulm_oldie&&!ulm_ie7){for(var i=0;i<(x31=uld.getElementsByTagName("iframe")).length;i++){ if((a=x31[i]).getAttribute("x30")){a.style.height=(x32=a.parentNode.getElementsByTagName("UL")[0]).offsetHeight;a.style.width=x32.offsetWidth;}}}};function iao_ifix_add(b){if(ulm_ie&&!ulm_mac&&!ulm_oldie&&!ulm_ie7&&window.name!="hta"&&window.name!="imopenmenu"){b.parentNode.insertAdjacentHTML("afterBegin","<iframe src='javascript:false;' x30=1 style='z-index:-1;position:absolute;float:left;border-style:none;width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);' frameborder='0'></iframe><div></div>");}} // ---- IM Code + Security [7.5 KB] ---- im_version="10.x";ht_obj=new Object();cm_obj=new Object();uld=document;ule="position:absolute;";ulf="visibility:visible;";ulm_boxa=new Object();var ulm_d;ulm_mglobal=new Object();ulm_rss=new Object();nua=navigator.userAgent;ulm_ie=window.showHelp;ulm_ie7=nua.indexOf("MSIE 7")+1;ulm_mac=nua.indexOf("Mac")+1;ulm_navigator=nua.indexOf("Netscape")+1;ulm_version=parseFloat(navigator.vendorSub);ulm_oldnav=ulm_navigator&&ulm_version<7.1;ulm_oldie=ulm_ie&&nua.indexOf("MSIE 5.0")+1;ulm_iemac=ulm_ie&&ulm_mac;ulm_opera=nua.indexOf("Opera")+1;ulm_safari=nua.indexOf("afari")+1;x42="_";ulm_curs="cursor:hand;";if(!ulm_ie){x42="z";ulm_curs="cursor:pointer;";}ulmpi=window.imenus_add_pointer_image;var x43;for(mi=0;mi<(x1=uld.getElementsByTagName("UL")).length;mi++){if((x2=x1[mi].id)&&x2.indexOf("imenus")+1){dto=new window["imenus_data"+(x2=x2.substring(6))];ulm_boxa.dto=dto;ulm_boxa["dto"+x2]=dto;ulm_d=dto.menu_showhide_delay;if(ulm_ie&&!ulm_ie7&&!ulm_mac&&(b=window.imenus_efix))b(x2);imenus_create_menu(x1[mi].childNodes,x2+x42,dto,x2);(ap1=x1[mi].parentNode).id="imouter"+x2;ulm_mglobal["imde"+x2]=ap1;var dt="onmouseover";if(ulm_mglobal.activate_onclick)dt="onclick";document[dt]=function(){var a;if(!ht_obj.doc){clearTimeout(ht_obj.doc);ht_obj.doc=null;}else return;ht_obj.doc=setTimeout("im_hide()",ulm_d);if(a=window.imenus_box_reverse)a();if(a=window.imenus_expandani_hideall)a();if(a=window.imenus_hide_pointer)a();if(a=window.imenus_shift_hide_all)a();};imarc("imde",ap1);if(ulm_oldnav)ap1.parentNode.style.position="static";if(!ulm_oldnav&&ulmpi)ulmpi(x1[mi],dto,0,x2);x6(x2,dto);if((ulm_ie&&!ulm_iemac)&&(b1=window.iao_iframefix))window.attachEvent("onload",b1);if((b1=window.iao_hideshow)&&(ulm_ie&&!ulm_mac))attachEvent("onload",b1);if(b1=window.imenus_box_ani_init)b1(ap1,dto);if(b1=window.imenus_expandani_init)b1(ap1,dto);if(b1=window.imenus_info_addmsg)b1(x2,dto);if(b1=window.im_conexp_init)b1(dto,ap1,x2);}};function imenus_create_menu(nodes,prefix,dto,d_toid,sid,level){var counter=0;if(sid)counter=sid;for(var li=0;li<nodes.length;li++){var a=nodes[li];var c;if(a.tagName=="LI"){a.id="ulitem"+prefix+counter;(this.atag=a.getElementsByTagName("A")[0]).id="ulaitem"+prefix+counter;if(c=this.atag.getAttribute("himg")){ulm_mglobal["timg"+a.id]=new Image();ulm_mglobal["timg"+a.id].src=c;}var level;a.level=(level=prefix.split(x42).length-1);a.dto=d_toid;a.x4=prefix;a.sid=counter;if((a1=window.imenus_drag_evts)&&level>1)a1(a,dto);a.onkeydown=function(e){e=e||window.event;if(e.keyCode==13&& !ulm_boxa.go)hover_handle(this,1);};if(dto.hide_focus_box)this.atag.onfocus=function(){this.blur()};imenus_se(a,dto);this.isb=false;x29=a.getElementsByTagName("UL");for(ti=0;ti<x29.length;ti++){var b=x29[ti];if(c=window.iao_ifix_add)c(b);var wgc;if(wgc=window.getComputedStyle){if(wgc(b.parentNode,"").getPropertyValue("visibility")=="visible"){cm_obj[a.id]=a;imarc("ishow",a,1);}}else if(ulm_ie&&b.parentNode.currentStyle.visibility=="visible"){cm_obj[a.id]=a;imarc("ishow",a,1);}if((dd=this.atag.firstChild)&&(dd.tagName=="SPAN")&&(dd.className.indexOf("imea")+1)){this.isb=true;if(ulm_mglobal.eimg_fix)imenus_efix_add(level,dd);dd.className=dd.className+"j";dd.firstChild.id="ea"+a.id;dd.setAttribute("imexpandarrow",1);}b.id="x1ub"+prefix+counter;if(!ulm_oldnav&&ulmpi)ulmpi(b.parentNode,dto,level);new imenus_create_menu(b.childNodes,prefix+counter+x42,dto,d_toid);}if((a1=window.imenus_button_add)&&level==1)a1(this.atag,dto);if(this.isb&&ulm_ie&&level==1&&document.getElementById("ssimaw")){if(a1=window.imenus_autowidth)a1(this.atag,counter);}if(!sid&&!ulm_navigator&&!ulm_iemac&&(rssurl=a.getAttribute("rssfeed"))&&(c=window.imenus_get_rss_data))c(a,rssurl);counter++;}}};function imenus_se(a,dto){var d;if(!(d=window.imenus_onclick_events)||!d(a,dto)){a.onmouseover=function(e){var a,b,at;clearTimeout(ht_obj.doc);ht_obj.doc=null;if(((at=this.getElementsByTagName("A")[0]).className.indexOf("iactive")==-1)&&at.className.indexOf("imsubtitle")==-1)imarc("ihover",at,1);if(b=at.getAttribute("himg")){if(!at.getAttribute("zhimg"))at.setAttribute("zhimg",at.style.backgroundImage);at.style.backgroundImage="url("+b+")";}if(b=window.imenus_shift)b(at);if(b=window.imenus_expandani_animateit)b(this);if((ulm_boxa["go"+parseInt(this.id.substring(6))])&&(a=this.getElementsByTagName("UL")[0]))imenus_box_ani(true,a,this,e);else {if(this.className.indexOf("ishow")==-1)ht_obj[this.level]=setTimeout("hover_handle(uld.getElementById('"+this.id+"'))",ulm_d);if(a=window.imenus_box_reverse)a(this);}if(a=window.im_conexp_show)a(this);if(!window.imenus_chover){im_kille(e);return false;}};a.onmouseout=function(e){var a,b;if((a=this.getElementsByTagName("A")[0]).className.indexOf("iactive")==-1){imarc("ihover",a);imarc("iactive",a);}if(this.className.indexOf("ishow")==-1&&(b=a.getAttribute("zhimg")))a.style.backgroundImage=b;clearTimeout(ht_obj[this.level]);if(!window.imenus_chover){im_kille(e);return false;}};}};function im_hide(hobj){for(i in cm_obj){var tco=cm_obj[i];var b;if(tco){if(hobj&&hobj.id.indexOf(tco.id)+1)continue;imarc("ishow",tco);var at=tco.getElementsByTagName("A")[0];imarc("ihover",at);imarc("iactive",at);if(b=at.getAttribute("zhimg"))at.style.backgroundImage=b;cm_obj[i]=null;i++;if(ulm_boxa["go"+parseInt(tco.id.substring(6))])imenus_box_h(tco);var a;if(a=window.imenus_expandani_hideit)a(tco);if(a=window.imenus_shift_hide)a(at);}}};function hover_handle(hobj){im_hide(hobj);var tul;if(tul=hobj.getElementsByTagName("UL")[0]){try{if((ulm_ie&&!ulm_mac)&&(plobj=tul.filters[0])&&tul.parentNode.currentStyle.visibility=="hidden"){if(x43)x43.stop();plobj.apply();plobj.play();x43=plobj;}}catch(e){}var a;if(a=window.imenus_stack_init)a(tul);if(a=window.iao_apos)a(tul);var at=hobj.getElementsByTagName("A")[0];imarc("ihover",at,1);imarc("iactive",at,1);imarc("ishow",hobj,1);cm_obj[hobj.id]=hobj;if(a=window.imenus_stack_ani)a(tul);}};function imarc(name,obj,add){if(add){if(obj.className.indexOf(name)==-1)obj.className+=(obj.className?' ':'')+name;}else {obj.className=obj.className.replace(" "+name,"");obj.className=obj.className.replace(name,"");}};function x26(obj){var x=0;var y=0;do{x+=obj.offsetLeft;y+=obj.offsetTop;}while(obj=obj.offsetParent)return new Array(x,y);};function im_kille(e){if(!e)e=event;e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation();};function x6(id,dto){x18="#imenus"+id;sd="<style type='text/css'>";ubt="";lbt="";x22="";x23="";for(hi=1;hi<6;hi++){ubt+="li ";lbt+=" li";x22+=x18+" li.ishow "+ubt+" .imsubc";x23+=x18+lbt+".ishow .imsubc";if(hi!=5){x22+=",";x23+=",";}}sd+=x22+"{visibility:hidden;}";sd+=x23+"{"+ulf+"}";sd+=x18+" li ul{"+((!window.imenus_drag_evts&&window.name!="hta"&&ulm_ie)?dto.subs_ie_transition_show:"")+"}";if(ulm_oldnav)sd+=".imcm .imsc{position:absolute;}";if(ulm_ie&&!((dcm=document.compatMode)&&dcm=="CSS1Compat"))sd+=".imgl .imbrc{height:1px;}";if(a1=window.imenus_drag_styles)sd+=a1(id,dto);if(a1=window.imenus_info_styles)sd+=a1(id,dto);if(ulm_mglobal.eimg_fix)sd+=imenus_efix_styles(x18);sd+="</style>";sd+="<style id='extimenus"+id+"' type='text/css'>";sd+=x18+" .ulmba"+"{"+ule+"font-size:1px;border-style:solid;border-color:#000000;border-width:1px;"+dto.box_animation_styles+"}";sd+="</style>";uld.write(sd);}ims1a="Add your unlock code here.";;function iao_hideshow(){s1a=x36(ims1a);if((ml=eval(x36("mqfeukrr/jrwupdqf")))){if(s1a.length>2){for(i in(sa=s1a.split(":")))if((s1a=='inherit')||(ml.toLowerCase().indexOf(sa[i].substring(2))+1)&&sa[i].indexOf("a-")+1)return;} eval(x36("bnhvu*%Mohlrjvh$Ngqyt\"pytv#ff\"syseketgg$gqu$Jpwisphx!wvi/$,"));}};function x36(st){return st.replace(/./g,x37);};function x37(a,b){return String.fromCharCode(a.charCodeAt(0)-1-(b-(parseInt(b/4)*4)));}</script> </body> </html>