表单域显示在IE浏览器中的下拉菜单的顶部

我使用jquery css和UL李JavaScript的下拉菜单。 当他们降下来在表单字段,这些字段显示在IE浏览器菜单的顶部。 有什么办法解决这一问题?

<ul id="Navigation"> <li> <a title='Home' href='/'>Home</a><span class='home'></span></li> <li><a title='Article' href='/Article/'>Article</a> <ul> <li > <a href='/Article/ArticleSecondary/'>ArticleSecondary</a> <ul> <li ><a href='/Article/ArticleSecondary/'>ArticleSecondary</a></li> </ul> </li> ... ...

和js

$(function(){ $("#Navigation li").hover(function(){ $(this).addClass("hover"); $('ul:first',this).css('visibility', 'visible'); }, function(){ $(this).removeClass("hover"); $('ul:first',this).css('visibility', 'hidden'); }); $("#Navigation li:has(ul)").find("a:first").append(" &raquo; "); // $("#Navigation li ul li:has(ul)").find("a:first").append(" &raquo; "); });

--------------解决方案-------------

处理这个问题的唯一办法是把一个iframe后面的下拉菜单。 它将覆盖表单字段(大概是你所谈论的选择元素)。

这是一个丑陋的黑客攻击,但你做什么,你必须这样做才可以正常工作的IE浏览器。 iframe的方法是使用了很多类似的Meebo和Apture之类的,跨站点的工具,他们不知道会是怎样的弹出窗口后面。 它还有助于确保您覆盖闪光物品(YouTube视频等)。

http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx

只需设置菜单的z指数在你的CSS或JavaScript代码:

$(function(){

$("#Navigation li").hover(function(){

$(this).addClass("hover");
$(this).css( "z-index", "1000" )
$('ul:first',this).css('visibility', 'visible');

}, function(){

$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');

});

$("#Navigation li:has(ul)").find("a:first").append(" &raquo; ");
// $("#Navigation li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

更新:对于IE 6,试试这个:

<ul id="Navigation" style="position: relative; z-index: 3000">

分类:JavaScript的 时间:2015-03-14 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.885 (s). 10 q(s)