多级导航菜单中奇怪的样式问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>menu</title>
<script type="text/javascript">
function constExpression(x) {
return x;
}function simplifyCSSExpression() {
try {
var ss,sl, rs, rl;
ss = document.styleSheets;
sl = ss.length for (var i = 0; i < sl; i++) {
simplifyCSSBlock(ss[i]);
}
}
catch (exc) {
alert("Got an error while processing css. The page should still work but might be a bit slower");
throw exc;
}
}function simplifyCSSBlock(ss) {
var rs, rl; for (var i = 0; i < ss.imports.length; i++)
simplifyCSSBlock(ss.imports[i]); if (ss.cssText.indexOf("expression(constExpression(") == -1)
return; rs = ss.rules;
rl = rs.length;
for (var j = 0; j < rl; j++)
simplifyCSSRule(rs[j]);}function simplifyCSSRule(r) {
var str = r.style.cssText;
var str2 = str;
var lastStr;
do {
lastStr = str2;
str2 = simplifyCSSRuleHelper(lastStr);
} while (str2 != lastStr) if (str2 != str)
r.style.cssText = str2;
}function simplifyCSSRuleHelper(str) {
var i, i2;
i = str.indexOf("expression(constExpression(");
if (i == -1) return str;
i2 = str.indexOf("))", i);
var hd = str.substring(0, i);
var tl = str.substring(i2 + 2);
var exp = str.substring(i + 27, i2);
var val = eval(exp)
return hd + val + tl;
}function removeExpressions() {
var all = document.all;
var l = all.length;
for (var i = 0; i < l; i++) {
simplifyCSSRule(all[i]);
}
}if (/msie/i.test(navigator.userAgent) && window.attachEvent != null) {
window.attachEvent("onload", function () {
simplifyCSSExpression(); removeExpressions();
});
}
var ua = navigator.userAgent;
var opera = /opera [56789]|opera\/[56789]/i.test(ua);
var webkit = /webkit/i.test(ua);
var ie = !opera && /MSIE/.test(ua);
var ie50 = ie && /MSIE 5\.[01234]/.test(ua);
var ie6 = ie && /MSIE [6789]/.test(ua);
var ie7 = ie && /MSIE [789]/.test(ua);
var ieBox = ie && (document.compatMode == null || document.compatMode != "CSS1Compat");
var moz = !opera && !webkit && /gecko/i.test(ua);
var nn6 = !opera && /netscape.*6\./i.test(ua);// define the default values
webfxMenuDefaultWidth = 100;webfxMenuDefaultBorderLeft = 1;
webfxMenuDefaultBorderRight = 1;
webfxMenuDefaultBorderTop = 1;
webfxMenuDefaultBorderBottom = 1;
webfxMenuDefaultPaddingLeft = 1;
webfxMenuDefaultPaddingRight = 1;
webfxMenuDefaultPaddingTop = 1;
webfxMenuDefaultPaddingBottom = 1;webfxMenuDefaultShadowLeft = 0;
webfxMenuDefaultShadowRight = ie && !ie50 && /win32/i.test(navigator.platform) ? 4 :0;
webfxMenuDefaultShadowTop = 0;
webfxMenuDefaultShadowBottom = ie && !ie50 && /win32/i.test(navigator.platform) ? 4 : 0;webfxMenuItemDefaultHeight = 18;
webfxMenuItemDefaultText = "Untitled";
webfxMenuItemDefaultHref = "javascript:void(0)";webfxMenuSeparatorDefaultHeight = 6;webfxMenuDefaultEmptyText = "Empty";webfxMenuDefaultUseAutoPosition = nn6 ? false : true;// other global constants
webfxMenuImagePath = "";webfxMenuUseHover = opera || webkit ? true : false;
webfxMenuHideTime = 500;
webfxMenuShowTime = 200;var webFXMenuHandler = {
idCounter : 0,
idPrefix : "webfx-menu-object-",
all : {},
getId : function () { return this.idPrefix + this.idCounter++; },
overMenuItem : function (oItem) {
if (this.showTimeout != null)
window.clearTimeout(this.showTimeout);
if (this.hideTimeout != null)
window.clearTimeout(this.hideTimeout);
var jsItem = this.all[oItem.id];
if (webfxMenuShowTime <= 0)
this._over(jsItem);
else
this.showTimeout = window.setTimeout("webFXMenuHandler._over(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuShowTime);
},
outMenuItem : function (oItem) {
if (this.showTimeout != null)
window.clearTimeout(this.showTimeout);
if (this.hideTimeout != null)
window.clearTimeout(this.hideTimeout);
var jsItem = this.all[oItem.id];
if (webfxMenuHideTime <= 0)
this._out(jsItem);
else
this.hideTimeout = window.setTimeout("webFXMenuHandler._out(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuHideTime);
},
blurMenu : function (oMenuItem) {
window.setTimeout("webFXMenuHandler.all[\"" + oMenuItem.id + "\"].subMenu.hide();", webfxMenuHideTime);
},
_over : function (jsItem) {
if (jsItem.subMenu) {
jsItem.parentMenu.hideAllSubs();
jsItem.subMenu.show();
}
else
jsItem.parentMenu.hideAllSubs();
},
_out : function (jsItem) {
// find top most menu
var root = jsItem;
var m;
if (root instanceof WebFXMenuButton)
m = root.subMenu;
else {
m = jsItem.parentMenu;
while (m.parentMenu != null && !(m.parentMenu instanceof WebFXMenuBar))
m = m.parentMenu;
}
if (m != null)
m.hide();
},
hideMenu : function (menu) {
if (this.showTimeout != null)
window.clearTimeout(this.showTimeout);
if (this.hideTimeout != null)
window.clearTimeout(this.hideTimeout); this.hideTimeout = window.setTimeout("webFXMenuHandler.all['" + menu.id + "'].hide()", webfxMenuHideTime);
},
showMenu : function (menu, src, dir) {
if (this.showTimeout != null)
window.clearTimeout(this.showTimeout);
if (this.hideTimeout != null)
window.clearTimeout(this.hideTimeout);
if (arguments.length < 3)
dir = "vertical"; menu.show(src, dir);
}
};

解决方案 »

  1.   


    function WebFXMenu() {
    this._menuItems = [];
    this._subMenus = [];
    this.id = webFXMenuHandler.getId();
    this.top = 0;
    this.left = 0;
    this.shown = false;
    this.parentMenu = null;
    webFXMenuHandler.all[this.id] = this;
    }WebFXMenu.prototype.width = webfxMenuDefaultWidth;
    WebFXMenu.prototype.emptyText = webfxMenuDefaultEmptyText;
    WebFXMenu.prototype.useAutoPosition = webfxMenuDefaultUseAutoPosition;WebFXMenu.prototype.borderLeft = webfxMenuDefaultBorderLeft;
    WebFXMenu.prototype.borderRight = webfxMenuDefaultBorderRight;
    WebFXMenu.prototype.borderTop = webfxMenuDefaultBorderTop;
    WebFXMenu.prototype.borderBottom = webfxMenuDefaultBorderBottom;WebFXMenu.prototype.paddingLeft = webfxMenuDefaultPaddingLeft;
    WebFXMenu.prototype.paddingRight = webfxMenuDefaultPaddingRight;
    WebFXMenu.prototype.paddingTop = webfxMenuDefaultPaddingTop;
    WebFXMenu.prototype.paddingBottom = webfxMenuDefaultPaddingBottom;WebFXMenu.prototype.shadowLeft = webfxMenuDefaultShadowLeft;
    WebFXMenu.prototype.shadowRight = webfxMenuDefaultShadowRight;
    WebFXMenu.prototype.shadowTop = webfxMenuDefaultShadowTop;
    WebFXMenu.prototype.shadowBottom = webfxMenuDefaultShadowBottom;WebFXMenu.prototype.add = function (menuItem) {
    this._menuItems[this._menuItems.length] = menuItem;
    if (menuItem.subMenu) {
    this._subMenus[this._subMenus.length] = menuItem.subMenu;
    menuItem.subMenu.parentMenu = this;
    } menuItem.parentMenu = this;
    };WebFXMenu.prototype.show = function (relObj, sDir) {
    if (this.useAutoPosition)
    this.position(relObj, sDir); var divElement = document.getElementById(this.id);
    divElement.style.left = opera ? this.left : this.left + "px";
    divElement.style.top = opera ? this.top : this.top + "px";
    divElement.style.visibility = "visible";
    this.shown = true;
    if (this.parentMenu)
    this.parentMenu.show();
    };WebFXMenu.prototype.hide = function () {
    this.hideAllSubs();
    var divElement = document.getElementById(this.id);
    divElement.style.visibility = "hidden";
    this.shown = false;
    };WebFXMenu.prototype.hideAllSubs = function () {
    for (var i = 0; i < this._subMenus.length; i++) {
    if (this._subMenus[i].shown)
    this._subMenus[i].hide();
    }
    };
    WebFXMenu.prototype.toString = function () {
    var top = this.top + this.borderTop + this.paddingTop;
    var str = "<div id='" + this.id + "' class='webfx-menu' style='" +
    "width:" + (!ieBox  ?
    this.width - this.borderLeft - this.paddingLeft - this.borderRight - this.paddingRight  :
    this.width) + "px;" +
    (this.useAutoPosition ?
    "left:" + this.left + "px;" + "top:" + this.top + "px;" :
    "") +
    (ie50 ? "filter: none;" : "") +
    "'>"; if (this._menuItems.length == 0) {
    str += "<span class='webfx-menu-empty'>" + this.emptyText + "</span>";
    }
    else {
    // loop through all menuItems
    for (var i = 0; i < this._menuItems.length; i++) {
    var mi = this._menuItems[i];
    str += mi;
    if (!this.useAutoPosition) {
    if (mi.subMenu && !mi.subMenu.useAutoPosition)
    mi.subMenu.top = top - mi.subMenu.borderTop - mi.subMenu.paddingTop;
    top += mi.height;
    }
    } } str += "</div>"; for (var i = 0; i < this._subMenus.length; i++) {
    this._subMenus[i].left = this.left + this.width - this._subMenus[i].borderLeft;
    str += this._subMenus[i];
    } return str;
    };
    // WebFXMenu.prototype.position defined later
    function WebFXMenuItem(sText, sHref, sToolTip, oSubMenu) {
    this.text = sText || webfxMenuItemDefaultText;
    this.href = (sHref == null || sHref == "") ? webfxMenuItemDefaultHref : sHref;
    this.subMenu = oSubMenu;
    if (oSubMenu)
    oSubMenu.parentMenuItem = this;
    this.toolTip = sToolTip;
    this.id = webFXMenuHandler.getId();
    webFXMenuHandler.all[this.id] = this;
    };
    WebFXMenuItem.prototype.height = webfxMenuItemDefaultHeight;
    WebFXMenuItem.prototype.toString = function () {
    return "<a" +
    " id='" + this.id + "'" +
    " href=\"" + this.href + "\"" +
    (this.target ? " target=\"" + this.target + "\"" : "") +
    (this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
    " onmouseover='webFXMenuHandler.overMenuItem(this)'" +
    (webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
    (this.subMenu ? " unselectable='on' tabindex='-1'" : "") +
    ">" +
    (this.subMenu ? "<img class='arrow' src=\"" + webfxMenuImagePath + "arrow.right.png\">" : "") +
    this.text +
    "</a>";
    };
    function WebFXMenuSeparator() {
    this.id = webFXMenuHandler.getId();
    webFXMenuHandler.all[this.id] = this;
    };
    WebFXMenuSeparator.prototype.height = webfxMenuSeparatorDefaultHeight;
    WebFXMenuSeparator.prototype.toString = function () {
    return "<div" +
    " id='" + this.id + "'" +
    (webfxMenuUseHover ?
    " onmouseover='webFXMenuHandler.overMenuItem(this)'" +
    " onmouseout='webFXMenuHandler.outMenuItem(this)'"
    :
    "") +
    "></div>"
    };function WebFXMenuBar() {
    this._parentConstructor = WebFXMenu;
    this._parentConstructor();
    }
    WebFXMenuBar.prototype = new WebFXMenu;
    WebFXMenuBar.prototype.toString = function () {
    var str = "<div id='" + this.id + "' class='webfx-menu-bar'>"; // loop through all menuButtons
    for (var i = 0; i < this._menuItems.length; i++)
    str += this._menuItems[i]; str += "</div>"; for (var i = 0; i < this._subMenus.length; i++)
    str += this._subMenus[i]; return str;
    };function WebFXMenuButton(sText, sHref, sToolTip, oSubMenu) {
    this._parentConstructor = WebFXMenuItem;
    this._parentConstructor(sText, sHref, sToolTip, oSubMenu);
    }
    WebFXMenuButton.prototype = new WebFXMenuItem;
    WebFXMenuButton.prototype.toString = function () {
    return "<a" +
    " id='" + this.id + "'" +
    " href=\"" + this.href + "\"" +
    (this.target ? " target=\"" + this.target + "\"" : "") +
    (this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
    (webfxMenuUseHover ?
    (" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
    " onmouseout='webFXMenuHandler.outMenuItem(this)'") :
    (
    " onfocus='webFXMenuHandler.overMenuItem(this)'" +
    (this.subMenu ?
    " onblur='webFXMenuHandler.blurMenu(this)'" :
    ""
    )
    )) +
    ">" +
    this.text +
    (this.subMenu ? " <img class='arrow' src=\"" + webfxMenuImagePath + "arrow.down.png\" align='absmiddle'>" : "") +
    "</a>";
    };
    /* Position functions */function getInnerLeft(el) {
    if (el == null) return 0;
    if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
    return getLeft(el) + getBorderLeft(el);
    }function getLeft(el) {
    if (el == null) return 0;
    return el.offsetLeft + getInnerLeft(el.offsetParent);
    }function getInnerTop(el) {
    if (el == null) return 0;
    if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
    return getTop(el) + getBorderTop(el);
    }function getTop(el) {
    if (el == null) return 0;
    return el.offsetTop + getInnerTop(el.offsetParent);
    }function getBorderLeft(el) {
    return ie ?
    el.clientLeft :
    parseInt(window.getComputedStyle(el, null).getPropertyValue("border-left-width"));
    }function getBorderTop(el) {
    return ie ?
    el.clientTop :
    parseInt(window.getComputedStyle(el, null).getPropertyValue("border-top-width"));
    }function opera_getLeft(el) {
    if (el == null) return 0;
    return el.offsetLeft + opera_getLeft(el.offsetParent);
    }function opera_getTop(el) {
    if (el == null) return 0;
    return el.offsetTop + opera_getTop(el.offsetParent);
    }
      

  2.   

    function getOuterRect(el) {
    return {
    left: (opera ? opera_getLeft(el) : getLeft(el)),
    top: (opera ? opera_getTop(el) : getTop(el)),
    width: el.offsetWidth,
    height: el.offsetHeight
    };
    }// mozilla bug! scrollbars not included in innerWidth/height
    function getDocumentRect(el) {
    return {
    left: 0,
    top: 0,
    width: (ie ?
    (ieBox ? document.body.clientWidth : document.documentElement.clientWidth) :
    window.innerWidth
    ),
    height: (ie ?
    (ieBox ? document.body.clientHeight : document.documentElement.clientHeight) :
    window.innerHeight
    )
    };
    }function getScrollPos(el) {
    return {
    left: (ie ?
    (ieBox ? document.body.scrollLeft : document.documentElement.scrollLeft) :
    window.pageXOffset
    ),
    top: (ie ?
    (ieBox ? document.body.scrollTop : document.documentElement.scrollTop) :
    window.pageYOffset
    )
    };
    }/* end position functions */WebFXMenu.prototype.position = function (relEl, sDir) {
    var dir = sDir;
    // find parent item rectangle, piRect
    var piRect;
    if (!relEl) {
    var pi = this.parentMenuItem;
    if (!this.parentMenuItem)
    return; relEl = document.getElementById(pi.id);
    if (dir == null)
    dir = pi instanceof WebFXMenuButton ? "vertical" : "horizontal"; piRect = getOuterRect(relEl);
    }
    else if (relEl.left != null && relEl.top != null && relEl.width != null && relEl.height != null) { // got a rect
    piRect = relEl;
    }
    else
    piRect = getOuterRect(relEl); var menuEl = document.getElementById(this.id);
    var menuRect = getOuterRect(menuEl);
    var docRect = getDocumentRect();
    var scrollPos = getScrollPos();
    var pMenu = this.parentMenu; if (dir == "vertical") {
    if (piRect.left + menuRect.width - scrollPos.left <= docRect.width)
    this.left = piRect.left;
    else if (docRect.width >= menuRect.width)
    this.left = docRect.width + scrollPos.left - menuRect.width;
    else
    this.left = scrollPos.left; if (piRect.top + piRect.height + menuRect.height <= docRect.height + scrollPos.top)
    this.top = piRect.top + piRect.height;
    else if (piRect.top - menuRect.height >= scrollPos.top)
    this.top = piRect.top - menuRect.height;
    else if (docRect.height >= menuRect.height)
    this.top = docRect.height + scrollPos.top - menuRect.height;
    else
    this.top = scrollPos.top;
    }
    else {
    if (piRect.top + menuRect.height - this.borderTop - this.paddingTop <= docRect.height + scrollPos.top)
    this.top = piRect.top - this.borderTop - this.paddingTop;
    else if (piRect.top + piRect.height - menuRect.height + this.borderTop + this.paddingTop >= 0)
    this.top = piRect.top + piRect.height - menuRect.height + this.borderBottom + this.paddingBottom + this.shadowBottom;
    else if (docRect.height >= menuRect.height)
    this.top = docRect.height + scrollPos.top - menuRect.height;
    else
    this.top = scrollPos.top; var pMenuPaddingLeft = pMenu ? pMenu.paddingLeft : 0;
    var pMenuBorderLeft = pMenu ? pMenu.borderLeft : 0;
    var pMenuPaddingRight = pMenu ? pMenu.paddingRight : 0;
    var pMenuBorderRight = pMenu ? pMenu.borderRight : 0; if (piRect.left + piRect.width + menuRect.width + pMenuPaddingRight +
    pMenuBorderRight - this.borderLeft + this.shadowRight <= docRect.width + scrollPos.left)
    this.left = piRect.left + piRect.width + pMenuPaddingRight + pMenuBorderRight - this.borderLeft;
    else if (piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight >= 0)
    this.left = piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight;
    else if (docRect.width >= menuRect.width)
    this.left = docRect.width  + scrollPos.left - menuRect.width;
    else
    this.left = scrollPos.left;
    }
    };</script>
    <style type="text/css">
    html {
    border: 0;
    overflow: hidden;
    }
    body {
    border: 0;
    margin: 0;
    }
    .menuBottom {
    top: 17px;
    height: 1px;
    width: 100%;
    background: buttonshadow;
    overflow: hidden;
    }
    .webfx-menu, .webfx-menu * {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    }
    .webfx-menu {
    float:left;
    position: absolute;
    z-index: 100;
    visibility: hidden;
    width: 140px;
    background: Menu;
    border: 2px outset Menu;
    padding: 1px; filter: none; -moz-opacity: 1;
    }
    .webfx-menu-empty {
    display: block;
    font: Menu;
    color: MenuText;
    height: 16px;
    padding-left: 5px;
    padding-right: 5px;
    }
    .webfx-menu a {
    display: block;
    width: auto;
    text-decoration: none;
    color: MenuText;
    XXXheight: 18px; height: expression(constExpression(ie7 ? "18px" : "1px"));
    vertical-align: center; padding: 2px;
    padding-left: 3px;
    padding-right: 3px;
    cursor: default;
    font: Menu;
    border: 0;
    XXXoverflow: hidden;
    }
    .webfx-menu a:visited {
    color: MenuText;
    border: 0;
    }
    .webfx-menu a:hover,
    .webfx-menu a:visited:hover {
    color: HighlightText;
    background: Highlight;
    border: 0;
    }
    .webfx-menu a .arrow {
    float: right;
    border: 0;
    width: 3px;
    XXXheight: 16px; margin-top: 3px;
    margin-right: 3px;
    }
    .webfx-menu div {
    height: 0;
    height: expression(constExpression(ieBox ? 2 : 0));
    border-top: 1px solid ButtonShadow;
    border-bottom: 1px solid ButtonHighlight;
    overflow: hidden;
    margin: 0;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 0mm;
    }
    .webfx-menu-bar {
    background: buttonface;
    padding: 2px;
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 11px;
    padding: expression(constExpression(ie50 ? "0px" : "2px"));
    }
    .webfx-menu-bar a,
    .webfx-menu-bar a:visited,
    .webfx-menu-bar a:visited:hover {
    color: ButtonText;
    border: 1px solid ButtonFace;
    text-decoration: none;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
    height: expression(constExpression(ie50 ? "17px" : "auto")); white-space: nowrap;
    }
    .webfx-menu-bar a:hover {
    color: ButtonText;
    background: ButtonFace;
    border-left: 1px solid ButtonHighlight;
    border-right: 1px solid ButtonShadow;
    border-top: 1px solid ButtonHighlight;
    border-bottom: 1px solid ButtonShadow;
    }
    .webfx-menu-bar a .arrow {
    border: 0;
    float: none;
    }.webfx-menu-bar a:active, .webfx-menu-bar a:focus {
    -moz-outline: none;
    outline: none;
    ie-dummy: expression(this.hideFocus=true); border-left: 1px solid ButtonShadow;
    border-right: 1px solid ButtonHighlight;
    border-top: 1px solid ButtonShadow;
    border-bottom: 1px solid ButtonHighlight;
    }
    </style>
    <script type="text/javascript">
    webfxMenuImagePath = "images/"
    var myMenu = new WebFXMenu;
    myMenu.width = 140;
    for (var i = 0; i < 5; i++) {
    myMenu.add(new WebFXMenuItem("Menu Item " + i, "javascript:alert(\"Not doing anything here\")", "Tool tip to show"));
    }
    myMenu.add(new WebFXMenuSeparator());
    var tmp;
    for (var i = 5; i < 10; i++) {
    tmp = new WebFXMenu;
    for (var j = 0; j < 5; j++) {
    tmp.add(new WebFXMenuItem("Menu Item " + i + "." + j, "javascript:alert(\"Not doing anything here\")", "Tool tip to show"));
    }
    myMenu.add(new WebFXMenuItem("Menu Item " + i, "javascript:alert(\"Not doing anything here\")", "Tool tip to show", tmp));
    }
    var myMenu2 = new WebFXMenu;
    myMenu2.add(new WebFXMenuItem("Menu Item 0"));
    myMenu2.add(new WebFXMenuItem("Menu Item 1"));
    myMenu2.add(new WebFXMenuItem("New Window", "javascript:void window.open(\"http://webfx.eae.net\", \"windowOrFrameName\")"));
    var myBar = new WebFXMenuBar;
    myBar.add(new WebFXMenuButton("Menu Button 1", "javascript:alert(\"Not doing anything here\")", "Tool tip to show"));
    myBar.add(new WebFXMenuButton("Menu Button 2", null, "Tool tip to show", myMenu));
    myBar.add(new WebFXMenuButton("Menu Button 3", null, null, myMenu2));
    </script>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="8" height="79">&nbsp;</td>
        <td width="148" align="center" valign="middle" style="background:url(../images/interface/top_middle.gif)">&nbsp;</td>
        <td width="8">&nbsp;</td>
        <td valign="top">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <td height="40" width="*" align="center" valign="bottom" style="background:url(../images/interface/top_title_middle.gif)">&nbsp;</td>
    <td width="8">&nbsp;</td>
    <td width="103" align="center" valign="middle" style="background:url(../images/interface/top_ver_middle.gif)">&nbsp;</td>
    </table>
    </td>
    </tr>
    <tr>
    <td height="39" align="right" style="font-weight:bold;background:url(../images/interface/top_menu_middle.gif)">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr align="right">
    <td align="right">
    <TABLE width='430' border="0" cellspacing="0" cellpadding="0">
    <TR>
    <TD>
    <SCRIPT type="text/javascript">
    <!--
    document.write(myBar);
    //-->
    </SCRIPT>
    </TD>
    </TR>
    </TABLE>
    </td>
    <td width="10"></td>
    <td width="65"><a href="#" onClick=""></a></td>
    <td width="10"></td>
    <td width="38"><a href="#" onClick=""></a></td>
    <td width="10"></td>
    <td width="38"><a href="#" onClick=""></a></td>
    </tr>
    </table>
    </td>
    </tr>
      </table>
    </td>
        <td width="8" align="right">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   

    以上是从网上down的一段多级导航菜单代码，可是样式有点不理解。当把菜单单独显示时，一切正常，可是放到table中显示时，子菜单都居右了请高人释疑。。