关于同样的代码在firefox 和 chrome显示的差距这么这么大呢。

Question

两个浏览器的内容是一样的。一开始执行了
 $(document).ready(function(){
               // Smooth Menu Options - (Dynamic Drive)
                ddsmoothmenu.init({
                   mainmenuid: "nav-wrap", //menu div id
                   orientation: 'h', //horizontal or vertical menu: Set to "h" or "v"
                   classname: 'ddsmoothmenu', //class added to menu's outer div
                   contentsource: "up" //"up" or ["container_id", "path_to_menu_file"]
               });
           });这个是js的内容。var ddsmoothmenu={//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'resource/OfertaStyle/images/site/sitedown.png', 25], right:['rightarrowclass', 'resource/OfertaStyle/images/site/siteright.png']},transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:false, offsetx:5, offsety:5},///////Stop configuring beyond here///////////////////////////detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
$menucontainer.html("Loading Menu...")
$.ajax({
url: setting.contentsource[1], //path to external menu file
async: true,
error:function(ajaxrequest){
$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
},
success:function(content){
$menucontainer.html(content)
ddsmoothmenu.buildmenu($, setting)
}
})
},
buildmenu:function($, setting){
var smoothmenu=ddsmoothmenu
var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
var $headers=$mainmenu.find("ul").parent()
$headers.hover(
function(e){
$(this).children('a:eq(0)').addClass('selected')
},
function(e){
$(this).children('a:eq(0)').removeClass('selected')
}
)
$headers.each(function(i){ //loop through each LI header
var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
var $subul=$(this).find('ul:eq(0)').css({display:'block'})
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
+ '" style="border:0;" />'
)
if (smoothmenu.shadow.enable){
this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
if (this.istopheader)
$parentshadow=$(document.body)
else{
var $parentLi=$curobj.parents("li:eq(0)")
$parentshadow=$parentLi.get(0).$shadow
}
this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader && setting.orientation!='v'? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader && setting.orientation!='v'? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
if ($targetul.queue().length<=1){ //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable){
var shadowleft=this.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop=this.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y
if (!this.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
this.$shadow.css({opacity:1})
}
this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
}
}
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable){
if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
this.$shadow.children('div:eq(0)').css({opacity:0})
}
this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
}
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
},init:function(setting){
if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
var mainmenuid='#'+setting.mainmenuid
var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
document.write('<style type="text/css">\n'
+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
+'</style>')
}
this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow
jQuery(document).ready(function($){ //ajax menu?
if (typeof setting.contentsource=="object"){ //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else{ //else if up menu
ddsmoothmenu.buildmenu($, setting)
}
})
}} 

Answer 1

<body><span id="j_id0:j_id1">
    
<div id="black-header-wrap">
<div id="header-970">
        <div class="ddsmoothmenu" id="nav-wrap">             <div id="logo">
                <a href="http://www.ofertainsurance.com/demo/index.html"><img src="/resource/1283481133000/OfertaStyle/images/blue-theme/sitelogo.png"></a> 
            </div>
            <ul id="nav">
                <li style="z-index: 100;">
                    <a style="padding-right: 25px;" class="active" href="/ShowDashboard?id=003R000000QqekTIAR">Dashboard<img src="resource/OfertaStyle/images/site/sitedown.png" class="downarrowclass" style="border: 0pt none;"></a>
                     <ul style="top: 41px; visibility: visible; left: 0px; width: 189px; display: none;">
                        <li style="z-index: 99;"><a href="/DashboardAgentLeads?id=003R000000QqekTIAR" class="no-link">Leads<img src="resource/OfertaStyle/images/site/siteright.png" class="rightarrowclass" style="border: 0pt none;"></a> <ul style="top: 0px; visibility: visible; left: 175px; width: 189px; display: none;">
                                   <li><a href="/DashboardAgentLeads?id=003R000000QqekTIAR">Dashboard</a> 
                                   </li>
                                   <li><a href="/SuggestedAgentLeads">Suggested</a> 
                                   </li>
                                   <li><a href="/SearchAgentLeads">Search</a> 
                                   </li>
                                   <li><a href="/AcceptedAgentLeads">Accepted</a> 
                                   </li>                                    <li><a href="/ReturnedAgentLeads">Returned</a> 
                                   </li>
                               </ul>
                        </li>
                        <li style="z-index: 98;"><a href="/DashboardAgentProposals?id=003R000000QqekTIAR" class="no-link">Proposals<img src="resource/OfertaStyle/images/site/siteright.png" class="rightarrowclass" style="border: 0pt none;"></a>
<ul style="top: 0px; visibility: visible; left: 175px; width: 189px; display: none;">
                                   <li><a href="/DashboardAgentProposals?id=003R000000QqekTIAR">Dashboard</a> 
                                   </li>                                    <li><a href="/SubmittedAgentProposals">Submitted</a> 
                                   </li>
                                   <li><a href="/AcceptedAgentProposals">Accepted</a> 
                                   </li>
                                   <li><a href="/DeclinedAgentProposals">Declined</a> 
                                   </li>
                                   <li><a href="/CanceledAgentProposals">Canceled</a> 
                                   </li>
                               </ul>                         </li>
                     </ul>
<ul style="display: none; visibility: visible;">
                        <li>
                        </li>
                     </ul>
                </li>
                <li><span id="j_id0:j_id1:OfertaTopPage:j_id48"><span id="j_id0:j_id1:OfertaTopPage:j_id49"><a href="/AgentAccount">My Account</a></span></span>                 </li>
                <li><a href="/secur/logout.jsp">Logout</a> 
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="strip-fullwidth">
    
</div></span>

Answer 2

当鼠标移到DASHBOARD 上时。会出现二级菜单。在firefox上没有问题。
可是在chrome中。出现二级菜单的位置一直改变。而且不确定。求助。最主要的就是这句
提示：
<ul style="top: 41px; visibility: visible; left: 0px; width: 189px; display: none;">
在firefox是不变的。
可是在chrome 却一直改变。

Answer 3

<ul style="top: 41px; visibility: visible; left: 0px; width: 189px; display: none;">
visibility: visible;
display: none
这2个只需要一个就可以了吧
你用top/left，应该设置position: absolute/relative 

Answer 4

你看上面的js文件来没有。ul的style在js中会被改掉。所以。在页面上加style其实是不管用的。