show段网上来的代码,抛石引玉--js html实现

<HTML>
<HEAD>
<TITLE>顶部菜单</TITLE>
</HEAD>
<BODY >
<br><br>
<center>
<h2>只show出你的最精简，易懂，可复用强的代码来吧。……</h2>
需求功能鼠标悬浮控件上时，右/左出子菜单，再二级……
子菜单能判断是否在屏幕之外，而自动调节展现窗口位置，想桌面刷新的右键一样，永远在屏幕只内……
js html实现，我先抛石了，等着玉人来……
<hr width=300>
<br><br>

<script language=JavaScript>
var JDWMinIE4   = (document.all) ? 1 : 0;
var JDWMinIE5   = (JDWMinIE4 && navigator.appVersion.indexOf("5.")  >= 0) ? 1 : 0;
function hideLayer(layer) {
if (JDWMinIE4) layer.style.visibility = "hidden";
}
function showLayer(layer) {
if (JDWMinIE4) layer.style.visibility = "visible";
}
function inheritLayer(layer) {
if (JDWMinIE4) layer.style.visibility = "inherit";
}
function getVisibility(layer) {
if (JDWMinIE4)return layer.style.visibility;
return "";
}
function moveLayerTo(layer, x, y) {
if (JDWMinIE4) {
layer.style.left = x;
layer.style.top  = y;   }
}
function moveLayerBy(layer, dx, dy) {
if (JDWMinIE4) {
layer.style.pixelLeft += dx;
layer.style.pixelTop  += dy;   }
}function getLeft(layer) {
if (JDWMinIE4)return layer.style.pixelLeft;
return -1;
}function getTop(layer) {
if (JDWMinIE4)return layer.style.pixelTop;
return -1;
}function getRight(layer) {
if (JDWMinIE4)return layer.style.pixelLeft + getWidth(layer);
return -1;
}function getBottom(layer) {
if (JDWMinIE4)return layer.style.pixelTop + getHeight(layer);
return -1;
}function getPageLeft(layer) {
var x;
if (JDWMinIE4) {
x = 0;
while (layer.offsetParent != null) {
x += layer.offsetLeft;
layer = layer.offsetParent;}
x += layer.offsetLeft;
return x;}
return -1;
}function getPageTop(layer) {
var y;
if (JDWMinIE4) {
y = 0;
while (layer.offsetParent != null) {
y += layer.offsetTop;
layer = layer.offsetParent;}
y += layer.offsetTop;
return y;}
return -1;
}function getWidth(layer) {
if (JDWMinIE4) {
if (layer.style.pixelWidth)return layer.style.pixelWidth;
else return layer.clientWidth;}
return -1;
}function getHeight(layer) {
if (JDWMinIE4) {
if (layer.style.pixelHeight)return layer.style.pixelHeight;
else return layer.clientHeight;}
return -1;
}function getzIndex(layer) {
if (JDWMinIE4)return layer.style.zIndex;
return -1;
}function setzIndex(layer, z) {
if (JDWMinIE4)layer.style.zIndex = z;
}function clipLayer(layer, clipleft, cliptop, clipright, clipbottom) {
if (JDWMinIE4)layer.style.clip = 'rect(' + cliptop + ' ' +  clipright + ' ' + clipbottom + ' ' + clipleft +')';
}function getClipLeft(layer) {
if (JDWMinIE4) {
var str =  layer.style.clip;
if (!str)return 0;
var clip = getIEClipValues(layer.style.clip);
return(clip[3]);}
return -1;
}function getClipTop(layer) {
if (JDWMinIE4) {
var str =  layer.style.clip;
if (!str)return 0;
var clip = getIEClipValues(layer.style.clip);
return clip[0];}
return -1;
}function getClipRight(layer) {
if (JDWMinIE4) {
var str =  layer.style.clip;
if (!str)return layer.style.pixelWidth;
var clip = getIEClipValues(layer.style.clip);
return clip[1];}
return -1;
}function getClipBottom(layer) {
if (JDWMinIE4) {
var str =  layer.style.clip;
if (!str)return layer.style.pixelHeight;
var clip = getIEClipValues(layer.style.clip);
return clip[2];}
return -1;
}function getClipWidth(layer) {
if (JDWMinIE4) {
var str = layer.style.clip;
if (!str)return layer.style.pixelWidth;
var clip = getIEClipValues(layer.style.clip);
return clip[1] - clip[3];}
return -1;
}function getClipHeight(layer) {
if (JDWMinIE4) {
var str =  layer.style.clip;
if (!str)return layer.style.pixelHeight;
var clip = getIEClipValues(layer.style.clip);
return clip[2] - clip[0];}
return -1;
}function getIEClipValues(str) {
var clip = new Array();
var i;
i = str.indexOf("(");
clip[0] = parseInt(str.substring(i + 1, str.length), 10);
i = str.indexOf(" ", i + 1);
clip[1] = parseInt(str.substring(i + 1, str.length), 10);
i = str.indexOf(" ", i + 1);
clip[2] = parseInt(str.substring(i + 1, str.length), 10);
i = str.indexOf(" ", i + 1);
clip[3] = parseInt(str.substring(i + 1, str.length), 10);
return clip;
}function scrollLayerTo(layer, x, y, bound) {
var dx = getClipLeft(layer) - x;
var dy = getClipTop(layer) - y;
scrollLayerBy(layer, -dx, -dy, bound);
}function scrollLayerBy(layer, dx, dy, bound) {
var cl = getClipLeft(layer);
var ct = getClipTop(layer);
var cr = getClipRight(layer);
var cb = getClipBottom(layer);
if (bound) {
if (cl + dx < 0)dx = -cl;
else if (cr + dx > getWidth(layer))dx = getWidth(layer) - cr;
if (ct + dy < 0)dy = -ct;
else if (cb + dy > getHeight(layer))dy = getHeight(layer) - cb;}
clipLayer(layer, cl + dx, ct + dy, cr + dx, cb + dy);
moveLayerBy(layer, -dx, -dy);
}function setBgColor(layer, color) {
if (JDWMinIE4)layer.style.backgroundColor = color;
}function getLayer(name) {
if (JDWMinIE4)return eval('document.all.' + name);
return null;
}function findLayer(name, doc) {
var i, layer;
for (i = 0; i < doc.layers.length; i++) {
layer = doc.layers[i];
if (layer.name == name)return layer;
if (layer.document.layers.length > 0)
if ((layer = findLayer(name, layer.document)) != null)
return layer;}
return null;
}function getWindowWidth() {
if (JDWMinIE4)return document.body.clientWidth;
return -1;
}function getWindowHeight() {
if (JDWMinIE4)return document.body.clientHeight;
return -1;
}function getPageWidth() {
if (JDWMinIE4)return document.body.scrollWidth;
return -1;
}function getPageHeight() {
if (JDWMinIE4)return document.body.scrollHeight;
return -1;
}function getPageScrollX() {
if (JDWMinIE4)return document.body.scrollLeft;
return -1;
}function getPageScrollY() {
if (JDWMinIE4)return document.body.scrollTop;
return -1;
}var JDWITEMs = new Array();    function ITEM(text, link) {
this.text = text;
this.link = link;
}
function ECSmenu(hdrWidth, menuWidth) {
this.hdrWidth  = hdrWidth;
this.width     = menuWidth;
this.height    = 0;
this.items = new Array();
this.addItem = ECSmenuaddItem;
}
function ECSmenuaddItem(item) {
this.items[this.items.length] = item;
}
function JDWITEM(width) {
this.x = 0;
this.y = 0;
this.width  = width;
this.height = 0;
this.align    = "left";
this.minWidth = 0;
this.inverted = false;
this.menus = new Array();
this.created = false;
this.border    = 2;
this.padding   = 4;
this.separator = 1;
this.setSizes    = JDWITEMSetSizes;
this.setColors   = JDWITEMSetColors;
this.setFonts    = JDWITEMSetFonts;
this.addNAVm     = JDWITEMaddNAVm;
this.create      = JDWITEMCreate;
this.hide        = JDWITEMHide;
this.show        = JDWITEMShow;
this.moveTo      = JDWITEMMoveTo;
this.moveBy      = JDWITEMMoveBy;
this.getzIndex   = JDWITEMGetzIndex;
this.setzIndex   = JDWITEMSetzIndex;
this.getWidth    = JDWITEMGetWidth;
this.getMinWidth = JDWITEMGetMinWidth;
this.getAlign    = JDWITEMGetAlign;
this.setAlign    = JDWITEMSetAlign;
this.resize      = JDWITEMResize;
this.invert      = JDWITEMInvert;
this.isInverted  = JDWITEMIsInverted;
this.index = JDWITEMs.length;
JDWITEMs[this.index] = this;
}function JDWITEMSetSizes(border, padding, separator) {
if (!this.created) {
this.border = border;
this.padding = padding;
this.separator = separator;   }
}function JDWITEMSetColors(bdColor,hdrFgColor, hdrBgColor, hdrHiFgColor, hdrHiBgColor,itmFgColor, itmBgColor, itmHiFgColor, itmHiBgColor) {
if (!this.created) {
this.borderColor  = bdColor;
this.hdrFgColor   = hdrFgColor;
this.hdrBgColor   = hdrBgColor;
this.hdrHiFgColor = hdrHiFgColor;
this.hdrHiBgColor = hdrHiBgColor;
this.itmFgColor   = itmFgColor;
this.itmBgColor   = itmBgColor;
this.itmHiFgColor = itmHiFgColor;
this.itmHiBgColor = itmHiBgColor;  }
}function JDWITEMSetFonts(hdrFamily, hdrStyle, hdrWeight, hdrSize,itmFamily, itmStyle, itmWeight, itmSize) {
if (!this.created) {
this.hdrFontFamily = hdrFamily;
this.hdrFontStyle  = hdrStyle;
this.hdrFontWeight = hdrWeight;
this.hdrFontSize   = hdrSize;
this.itmFontFamily = itmFamily;
this.itmFontStyle  = itmStyle;
this.itmFontWeight = itmWeight;
this.itmFontSize   = itmSize;   }
}function JDWITEMaddNAVm(menu) {
if (!this.created)this.menus[this.menus.length] = menu;
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

ie4 ie5???  是不是太老了
function JDWITEMMoveBy(dx, dy) {
this.x += dx;
this.y += dy;
if (this.created)
moveLayerTo(this.baseLayer, this.x, this.y);
}function JDWITEMGetzIndex() {
if (this.created)return getzIndex(this.baseLayer);
return 0;
}function JDWITEMSetzIndex(z) {
var i;
if (this.created) {
setzIndex(this.baseLayer, z);
for (i = 0; i < this.menus.length; i++)
setzIndex(this.menus[i].baseLayer, z);   }
}function JDWITEMGetWidth() {
return this.width;
}function JDWITEMGetMinWidth() {
return this.minWidth;
}function JDWITEMGetAlign() {
return this.align;
}function JDWITEMSetAlign(align) {
this.align = align;
if (this.created)this.resize(this.width);
}function JDWITEMResize(width) {
if (this.created) {
this.width = Math.max(width, this.minWidth);
if (JDWMinIE4) {
JDWITEMIEResizeLayer(this.fillerLayer, this.width - 2 * this.border, this.height - 2 * this.border);
JDWITEMIEResizeLayer(this.baseLayer, this.width, this.height);}
clipLayer(this.fillerLayer, 0, 0, this.width - 2 * this.border, this.height - 2 * this.border);
clipLayer(this.baseLayer, 0, 0, this.width, this.height);
if (this.align == "left")this.hdrsOffsetX = 0;
else if (this.align == "center")this.hdrsOffsetX = Math.round((this.width - this.minWidth) / 2);
else if (this.align == "right")this.hdrsOffsetX = this.width - this.minWidth;
else this.hdrsOffsetX = Math.min(parseInt(this.align, 10), this.width - this.minWidth);
moveLayerTo(this.hdrsBaseLayer, this.hdrsOffsetX, 0);
for (i = 0; i < this.menus.length; i++) {
this.menus[i].hdrDmmyLayer.offsetX = this.menus[i].hdrLeft - this.border;
if (this.hdrsOffsetX + this.menus[i].hdrDmmyLayer.offsetX + this.menus[i].width > this.width)
this.menus[i].hdrDmmyLayer.offsetX = this.menus[i].hdrRight - this.menus[i].width;   }
}
else this.width = width;
}function JDWITEMInvert() {
this.inverted = !this.inverted;
}function JDWITEMIsInverted() {
return this.inverted;
}function JDWITEMIEResizeLayer(layer, width, height) {
layer.style.pixelWidth = width;
layer.style.pixelHeight = height;
}function JDWITEMHeaderOn(e) {
var bar;
var x, y;
bar = JDWITEMs[this.index];
if (this.menuLayer != null) {
x = bar.x + bar.hdrsOffsetX + this.offsetX;
y = bar.y + this.offsetY;
if (bar.inverted)
y = bar.y - this.menuLayer.height + bar.border;
moveLayerTo(this.menuLayer, x, y);
this.menuLayer.left = getPageLeft(this.menuLayer);
this.menuLayer.top = getPageTop(this.menuLayer);
this.menuLayer.right = this.menuLayer.left + this.menuLayer.width + 1;
this.menuLayer.bottom = this.menuLayer.top + this.menuLayer.height + 1;}
if (JDWMinIE4) {
if (bar.activeHeader != null && bar.activeHeader != this) {
hideLayer(bar.activeHeader.highLayer);
if (bar.activeHeader.menuLayer != null)
hideLayer(bar.activeHeader.menuLayer);}
bar.activeHeader = this;}
showLayer(this.highLayer);
if (this.menuLayer != null)
showLayer(this.menuLayer);
}function JDWITEMHeaderOff(e) {
if (this.menuLayer != null) {
if (JDWMinIE4) {
mouseX = window.event.clientX + document.body.scrollLeft;
mouseY = window.event.clientY + document.body.scrollTop;}
if (mouseX >= this.menuLayer.left  && mouseX <= this.menuLayer.right && mouseY >= this.menuLayer.top   && mouseY <= this.menuLayer.bottom)
return;
hideLayer(this.menuLayer);}
hideLayer(this.highLayer);
}function ECSmenuOff(e) {
if (JDWMinIE4) {
mouseX = window.event.clientX + document.body.scrollLeft;
mouseY = window.event.clientY + document.body.scrollTop;
if (mouseX >= this.left  && mouseX <= this.right && mouseY >= this.top   && mouseY <= this.bottom)
return;}
hideLayer(this);
hideLayer(this.parentHighLayer);
}function JDWITEMItemOn() {
showLayer(this.highLayer);
}function JDWITEMItemOff() {
hideLayer(this.highLayer);
}function JDWITEMItemClick(e) {
if (this.link == "")return true;
if (this.menuLayer != null) {
hideLayer(this.menuLayer);}
if (this.parentHighLayer != null) {
hideLayer(this.parentHighLayer);}
hideLayer(this.highLayer);
if (this.link.indexOf("javascript:") == 0)eval(this.link);
else window.location.href = this.link;
return true;
}
var mouseX = 0;
var mouseY = 0;
document.onmousemove = JDWITEMGetMousePosition;function JDWITEMGetMousePosition(e) {
if (JDWMinIE4) {
mouseX = window.event.clientX + document.body.scrollLeft;
mouseY = window.event.clientY + document.body.scrollTop;   }
}var origWidth;
var origHeight;
window.onresize = JDWITEMReload;function JDWITEMReload() {
if (JDWMinIE4)setTimeout('window.location.href = window.location.href', 2000);
else window.location.href = window.location.href;
}function G6JDWinit(){
fullWidth = getWindowWidth() - ( getWindowHeight() < getPageHeight() ? 16 : 0);
JDWBAR1.create();
JDWBAR1.moveTo(0,-getWindowHeight()+43);
JDWBAR1.setzIndex(1);
JDWBAR1.resize(fullWidth);
JDWBAR1.setAlign(getWindowWidth()+60);
JDWBAR1.hide();JDWBAR2.create();
JDWBAR2.moveBy(0,-getWindowHeight()+17);
JDWBAR2.resize(fullWidth);
JDWBAR2.setzIndex(2);
NAVupdatePOSY();
}window.onload=G6JDWinit;function NAVupdatePOSY() {
var viewTop;
var viewBottom;
var dy;
viewTop = getPageScrollY();
viewBottom = viewTop + getWindowHeight();
dy = Math.round(Math.abs(viewTop - JDWBAR1.y));
if (viewTop < JDWBAR1.y) dy = -dy;
dy = Math.round(Math.abs(viewTop - JDWBAR2.y));
if (viewTop < JDWBAR2.y) dy = -dy;
if (JDWBAR1.bottom < viewTop) JDWBAR1.moveTo(0, viewTop - JDWBAR1.height);
if (JDWBAR1.top > viewBottom) JDWBAR1.moveTo(0, viewBottom);
if (JDWBAR2.bottom < viewTop) JDWBAR2.moveTo(0, viewTop - JDWBAR2.height);
if (JDWBAR2.top > viewBottom) JDWBAR2.moveTo(0, viewBottom);
JDWBAR1.moveBy(0, dy);
JDWBAR2.moveBy(0, dy);
setTimeout('NAVupdatePOSY()', 0);
}var JDWBAR2 = new JDWITEM(0);
JDWBAR2.setSizes   (1, 4, 1);
JDWBAR2.setColors  ("#808080","#66CC00", "#000033","#CC9900","#0D7CA1", "#CC9999","#660000", "#333399", "#0D7CA1");
JDWBAR2.setFonts   ("Arial, Verdana","plain","bold","15px","Arial, Verdana","plain","bold","12px");
var JDWBAR1 = new JDWITEM(0);
siteMenu = new ECSmenu(0, 80);

siteMenu.addItem(new ITEM("<center>父菜单1</center>", "index.html"));
siteMenu.addItem(new ITEM("<center>子菜单1</center>", "default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单2</center>", "default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单3</center>", "default.htm"));
JDWBAR2.addNAVm(siteMenu);
siteMenu = new ECSmenu(0, 100);
siteMenu.addItem(new ITEM("<center> 父菜单2 </center>", "index.html"));
siteMenu.addItem(new ITEM("<center>子菜单1</center>","default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单2</center>","default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单3</center>","default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单4</center>","default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单5</center>","default.htm"));
JDWBAR2.addNAVm(siteMenu);
siteMenu = new ECSmenu(0, 100);
siteMenu.addItem(new ITEM("<center> 父菜单3 </center>", "index.html"));
siteMenu.addItem(new ITEM("<center>子菜单1</center>","default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单2</center>","default.htm"));
JDWBAR2.addNAVm(siteMenu);
siteMenu = new ECSmenu(0, 100);
siteMenu.addItem(new ITEM("<center> 父菜单4 </center>", "index.html"));
siteMenu.addItem(new ITEM("<center>子菜单1</center>","default.htm"));
siteMenu.addItem(new ITEM("<center>子菜单2</center>","default.htm"));
JDWBAR2.addNAVm(siteMenu);</script></BODY></HTML>
<%@ page language="java" contentType="text/html; charset=GB2312"
pageEncoding="GB2312"%>
<!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>
</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 20px 0px; 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://asdf) 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:#47f 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:0px 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:0px 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>
<center>
<div class="menu"> <ul>
<li>
<a href="http://www.jsweb8.cn/">日期下钻
</a>
 
<ul>
<li>
<a class="sub1" href="../menu/hover_click.html" title="一季度">一季度
</a>


<ul>
<li>
<a href="../menu/form.html" title="1">1</a>
</li>
<li>
<a href="../menu/nodots.html" title="1">2</a>
</li>
<li>
<a class="sub2" href="#nogo">3
</a>


<ul>
<li>
<a href="#nogo">1</a>
</li>
<li>
<a href="#nogo">2</a>
</li>
<li class="last">
<a href="#nogo">3</a>
</li>
</ul>

</li>
<li class="last">
<a href="../menu/hover_click.html" title="4">4</a>
</li>
</ul>

</li>
<li>
<a href="../menu/shadow_boxing.html" title="二季度">二季度</a>
</li>
<li>
<a href="../menu/shadow_boxing.html" title="二季度">二季度</a>
</li>
<li class="last">
<a href="../menu/em_images.html" title="四季度">四季度</a>
</li>
</ul>

</li>
<li>
<a href="http://www.jsweb8.cn/">日期下钻
</a>
 
<ul>
<li>
<a class="sub1" href="../menu/hover_click.html" title="一季度">一季度
</a>


<ul>
<li>
<a href="../menu/form.html" title="1">1</a>
</li>
<li>
<a href="../menu/nodots.html" title="1">2</a>
</li>
<li>
<a class="sub2" href="#nogo">3
</a>


<ul>
<li>
<a href="#nogo">1</a>
</li>
<li>
<a href="#nogo">2</a>
</li>
<li class="last">
<a href="#nogo">3</a>
</li>
</ul>

</li>
<li class="last">
<a href="../menu/hover_click.html" title="4">4</a>
</li>
</ul>

</li>
<li>
<a href="../menu/shadow_boxing.html" title="二季度">二季度</a>
</li>
<li>
<a href="../menu/shadow_boxing.html" title="二季度">二季度</a>
</li>
<li class="last">
<a href="../menu/em_images.html" title="四季度">四季度</a>
</li>
</ul>

</li> </ul>
<ul>
<li>
adf
<ui>asdf</ui>
</li>
</ul> </div>
</center>
</body>
</html>

这个好点……都是我砸的都是砖头哈…………大家表太在意
show出你的最精简，易懂，可复用强的代码来吧。……