Code
<html>
<head>
<style type="text/css">
body{text-align:center;}
.navMenu{
height: 27px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
width:910px;
margin-left:auto;
margin-right:auto;
border:solid 1px red;
text-align:center;
}
.navMenu a{
line-height: 27px;
color: #FFFFFF;
text-decoration: none;
padding-right: 0px;
padding-left: 0px;
}
.navMenu a:visited {
color:#fff;
}
.navMenu a:hover {
color:#fff;
}
/*****************************************/
.navMenu ul{
list-style-type: none;
margin: 0px;
padding:0px;
float:left;
}
.navMenu ul li{
float: left;
height: 27px;
color: #fff;
margin: 0px;
background:url(http://www.chaoshou.net/images/headmenu.gif) repeat-x;
}
.navMenu ul li a{
display: block;
}
/*****.navMenu ul li img{float:left;margin-left:5px;margin-right:5px;}
/**************************/
.sepImg{float:left;margin-left:5px;margin-right:5px;}
.navMenu li ul{
display: none;
background-color: #a8a8a8;
position: absolute;
text-align: left;
margin: 0px;
padding: 0px;
}
.navMenu li ul li{
background:#9e0a0e;width:100px;line-height:27px;
float: none;margin:1px;/*******
width: 120px;
background:#fff;/***********/
}
.navMenu li ul li a{
width:100px;
height: 27px;
color: #FFFFFF;
text-decoration: none;
text-align:center;
display: block;
}
.navMenu li ul li a:hover
{
background:#e57a00;
}
.navLeft{float:left;width:4px;margin:0px;}
.navRight{float:left;width:4px;margin:0px;}
/****************************/</style>
<script language="javascript">
<!--
var w3c=(document.getElementById)? true:false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var ie5=(w3c && ie)? true : false;
var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;
var op8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)? false:true;
//function Obj(o){
//return document.getElementById(o)?document.getElementById(o):o;
//}
function GetXYWH(o)
{
var nLt=0;
var nTp=0;
var offsetParent = o;
while (offsetParent!=null && offsetParent!=document.body) {
nLt+=offsetParent.offsetLeft;
nTp+=offsetParent.offsetTop;
if(!ns6){
parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):"";
parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTp+=parseInt(offsetParent.currentStyle.borderTopWidth):"";
}
offsetParent=offsetParent.offsetParent;
//alert(offsetParent.tagName);
}
return nLt;
//alert("ID:"+o.id+"\n\nL:"+nLt+" T:"+nTp+"\nW:"+o.offsetWidth+" H:"+o.offsetHeight);
}
function onMouseOver(){OnMouse(this,"block")}
function onMouseDown(){OnMouse(this,"block")}
function onMouseUp(){OnMouse(this,"none")}
function onMouseOut(){OnMouse(this,"none")}
function OnMouse(Obj,Display){
var ul = Obj.getElementsByTagName("ul")[0];
if(ul!=null){
ul.style.display=Display;
//ul.style.left = (ul.parentNode.offsetLeft-30)+"px";
//alert(ul.offsetLeft);
ul.style.left = (GetXYWH(ul.parentNode)-30)+"px";
//alert(ul.offsetWidth);
}
}
//-->
</script>
</head>
<body>
<div class="navMenu">
<ul>
<li class="navLeft"><img src='http://www.chaoshou.net/images/menu_left.gif' alt=""/>
<li><a href='/default.aspx'>网站首页</a></li>
<li><img class="sepImg" src='http://www.chaoshou.net/images/menu_separator.gif' alt=""/></li>
<li onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')"><a href='/class.aspx?pid=1'>公司概况</a>
<ul onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')">
<li><a href='/class.aspx?pid=1&id=1'>公司概况</a></li>
<li><a href='/class.aspx?pid=1&id=2'>董事长致辞</a></li>
<li><a href='/class.aspx?pid=1&id=3'>总裁致辞</a></li>
<li><a href='/class.aspx?pid=1&id=4'>企业文化</a></li>
</ul>
</li>
<li><img class="sepImg" src='http://www.chaoshou.net/images/menu_separator.gif' alt=""/></li>
<li onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')"><a href='/class.aspx?pid=3'>公司动态</a>
<ul onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')">
<li><a href='/class.aspx?pid=3&id=8'>兴利大事记</a></li>
<li><a href='/class.aspx?pid=3&id=9'>公司动态</a></li>
<li><a href='/class.aspx?pid=3&id=10'>公司新闻</a></li>
</ul>
</li>
</li>
<li class="navRight"><img src='http://www.chaoshou.net/images/menu_right.gif' alt=""/></li>
</ul>
</div>
<TABLE cellSpacing="0" cellPadding="0" width="910px" align="center" border="0">
<TBODY>
<TR>
<TD><div style="z-index:-100;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="910" height="160">
<param name="movie" value='http://www.chaoshou.net/images/banner2.swf'>
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<param name="wmode" value="transparent">
<embed wmode="transparent" src='http://www.chaoshou.net/images/banner2.swf' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="910" height="160"></embed>
</object>
</div>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
<html>
<head>
<style type="text/css">
body{text-align:center;}
.navMenu{
height: 27px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
width:910px;
margin-left:auto;
margin-right:auto;
border:solid 1px red;
text-align:center;
}
.navMenu a{
line-height: 27px;
color: #FFFFFF;
text-decoration: none;
padding-right: 0px;
padding-left: 0px;
}
.navMenu a:visited {
color:#fff;
}
.navMenu a:hover {
color:#fff;
}
/*****************************************/
.navMenu ul{
list-style-type: none;
margin: 0px;
padding:0px;
float:left;
}
.navMenu ul li{
float: left;
height: 27px;
color: #fff;
margin: 0px;
background:url(http://www.chaoshou.net/images/headmenu.gif) repeat-x;
}
.navMenu ul li a{
display: block;
}
/*****.navMenu ul li img{float:left;margin-left:5px;margin-right:5px;}
/**************************/
.sepImg{float:left;margin-left:5px;margin-right:5px;}
.navMenu li ul{
display: none;
background-color: #a8a8a8;
position: absolute;
text-align: left;
margin: 0px;
padding: 0px;
}
.navMenu li ul li{
background:#9e0a0e;width:100px;line-height:27px;
float: none;margin:1px;/*******
width: 120px;
background:#fff;/***********/
}
.navMenu li ul li a{
width:100px;
height: 27px;
color: #FFFFFF;
text-decoration: none;
text-align:center;
display: block;
}
.navMenu li ul li a:hover
{
background:#e57a00;
}
.navLeft{float:left;width:4px;margin:0px;}
.navRight{float:left;width:4px;margin:0px;}
/****************************/</style>
<script language="javascript">
<!--
var w3c=(document.getElementById)? true:false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var ie5=(w3c && ie)? true : false;
var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;
var op8=(navigator.userAgent.toLowerCase().indexOf("opera")==-1)? false:true;
//function Obj(o){
//return document.getElementById(o)?document.getElementById(o):o;
//}
function GetXYWH(o)
{
var nLt=0;
var nTp=0;
var offsetParent = o;
while (offsetParent!=null && offsetParent!=document.body) {
nLt+=offsetParent.offsetLeft;
nTp+=offsetParent.offsetTop;
if(!ns6){
parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):"";
parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTp+=parseInt(offsetParent.currentStyle.borderTopWidth):"";
}
offsetParent=offsetParent.offsetParent;
//alert(offsetParent.tagName);
}
return nLt;
//alert("ID:"+o.id+"\n\nL:"+nLt+" T:"+nTp+"\nW:"+o.offsetWidth+" H:"+o.offsetHeight);
}
function onMouseOver(){OnMouse(this,"block")}
function onMouseDown(){OnMouse(this,"block")}
function onMouseUp(){OnMouse(this,"none")}
function onMouseOut(){OnMouse(this,"none")}
function OnMouse(Obj,Display){
var ul = Obj.getElementsByTagName("ul")[0];
if(ul!=null){
ul.style.display=Display;
//ul.style.left = (ul.parentNode.offsetLeft-30)+"px";
//alert(ul.offsetLeft);
ul.style.left = (GetXYWH(ul.parentNode)-30)+"px";
//alert(ul.offsetWidth);
}
}
//-->
</script>
</head>
<body>
<div class="navMenu">
<ul>
<li class="navLeft"><img src='http://www.chaoshou.net/images/menu_left.gif' alt=""/>
<li><a href='/default.aspx'>网站首页</a></li>
<li><img class="sepImg" src='http://www.chaoshou.net/images/menu_separator.gif' alt=""/></li>
<li onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')"><a href='/class.aspx?pid=1'>公司概况</a>
<ul onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')">
<li><a href='/class.aspx?pid=1&id=1'>公司概况</a></li>
<li><a href='/class.aspx?pid=1&id=2'>董事长致辞</a></li>
<li><a href='/class.aspx?pid=1&id=3'>总裁致辞</a></li>
<li><a href='/class.aspx?pid=1&id=4'>企业文化</a></li>
</ul>
</li>
<li><img class="sepImg" src='http://www.chaoshou.net/images/menu_separator.gif' alt=""/></li>
<li onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')"><a href='/class.aspx?pid=3'>公司动态</a>
<ul onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')">
<li><a href='/class.aspx?pid=3&id=8'>兴利大事记</a></li>
<li><a href='/class.aspx?pid=3&id=9'>公司动态</a></li>
<li><a href='/class.aspx?pid=3&id=10'>公司新闻</a></li>
</ul>
</li>
</li>
<li class="navRight"><img src='http://www.chaoshou.net/images/menu_right.gif' alt=""/></li>
</ul>
</div>
<TABLE cellSpacing="0" cellPadding="0" width="910px" align="center" border="0">
<TBODY>
<TR>
<TD><div style="z-index:-100;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="910" height="160">
<param name="movie" value='http://www.chaoshou.net/images/banner2.swf'>
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<param name="wmode" value="transparent">
<embed wmode="transparent" src='http://www.chaoshou.net/images/banner2.swf' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="910" height="160"></embed>
</object>
</div>
</TD>
</TR>
</TBODY>
</TABLE>
</body>