完美下拉导航条,适应ie6,ie7和firefox

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"))? truefalse;
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><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')"><href='/class.aspx?pid=1'>公司概况</a>
               
<ul onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')">                           
                        
<li><href='/class.aspx?pid=1&id=1'>公司概况</a></li>                             
                        
<li><href='/class.aspx?pid=1&id=2'>董事长致辞</a></li>                               
                        
<li><href='/class.aspx?pid=1&id=3'>总裁致辞</a></li>                             
                        
<li><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')"><href='/class.aspx?pid=3'>公司动态</a>
               
<ul onMouseOver="OnMouse(this,'block')" onmouseout="OnMouse(this,'none')">                           
                        
<li><href='/class.aspx?pid=3&id=8'>兴利大事记</a></li>                               
                       
<li><href='/class.aspx?pid=3&id=9'>公司动态</a></li>                            
                        
<li><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>

你可能感兴趣的:(完美下拉导航条,适应ie6,ie7和firefox)