菜单的下拉效果在IE(Internet Explorer)中不起作用,但与其他浏览器一起使用 [英] Drop down effect of the menu is not working in IE( internet explorer) but work fine with other browsers
问题描述
我的HTML代码是
< ul id = < span class =code-keyword> menu >
< li > < a href = # > 主页< / a > < ; / li >
< li > < a href = # > 关于< span class =code-keyword>< / a >
< ul >
< li > < span class =code-keyword>< a href = # > 历史记录< / a > < / li >
< li > < a href = # > 使命& Vision < / a > < span class =code-keyword>< / li >
< / ul >
< / li >
< li > < a href = # > 项目< / a >
< ul >
< li > < a href = # > Yashodara < / a > < / li >
< li > < a href = # > SLC < / a > < span class =code-keyword>< / li >
< li > < a href = # > CDP < / a > ; 跨度> < / li >
< li > < a href = # > Avocacy < / a > ; < / li >
< / ul > ;
< / li < span class =code-keyword>>
< li > < a href = # > 协作< / a >
< ul >
< li > < a hre f = # > 赞助儿童< / a > < / li >
< li > < a href = # > 捐赠< / a > < / li >
< li > < a href = # > 卢比一个< / a > < / li >
< li > < a href = # > 志愿者< / a > < / li >
< li > < ; a href < span class =code-keyword> = # > 公司< / a > < / li >
< / ul >
< / li >
< li > < a href = # > 图库< / a >
< ul >
< li > < a href = # > 图片< / a > < / li >
< li > < a href = # > Vedio < / a > < / li >
< / ul >
< / li >
< li > < span class =code-keyword>< a href = # > 报告&出版物< / a >
< ul >
< li > < a href = # > 年度报告< / a > < / li >
< li > < a href = # > 审核< < span class =code-leadattribute> / a > < / li >
< < span class =code-leadattribute> li > < a href = # > 扩展模式< / a > < / li >
< li > < a href = # > 发布< / a > < / li >
< / ul >
< / li < span class =code-keyword>>
< li > < a href = # > 联系< / a > < / li >
< / ul >
MY HTML CODE Is 这篇关于菜单的下拉效果在IE(Internet Explorer)中不起作用,但与其他浏览器一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
我的CSS是
< pre lang =CSS>#菜单,#菜单 ul
{
margin : 0px;
padding : 1px;
list-style : none;
float : right;
}
# menu
{
min-width : 460px;
margin-顶部 : 58px;
background : #0080C0;
border-left : 2px solid#0080C0;
< span class =code-attribute> border-top : 2px solid#0080C0;
border-radius : 10px 0 0 0 ;
}
#菜单:在之前,#菜单:在
{
content : ;
显示 : table;
}
# menu:after
{
clear : both;
}
#菜单
{
zoom : 1;
}
# menu li
{
float : left;
border-right : 1px solid #fff;
position : relative;
}
# menu a
{
float : left;
padding : 12px 30px;
颜色 : #fff;
text-transform : 大写;
font : 粗体12px Arial,Helvetica;
text-decoration : none;
}
# menu li:hover > a
{
color
background-color : #4AA5FF;
border- radius : 0px 0 0 0;
}
* html # menu li < span class =code-leadattribute> a:hover
{
/ * 仅限IE6 * /
颜色 : #ff0000;
}
#菜单 ul
{
margin : 20px 0 0 0;
_ margin : 0; / * 仅限IE6 * /
opacity : 0;
可见性 : 隐藏;
position : 绝对值;
top : 40px;
left : 0;
z-index : 1;
background : #444; 1;
背景 : 线性渐变(#444,#111) ;
box-shadow : 0 -1px 0 rgba(255,255,255,.3);
border-radius : 3px;
transition : 所有.2s轻松进出;
}
#菜单 li:hover > ul
{
不透明度 :
可见性 : 可见;
margin : 0;
}
# menu ul ul
{
top : 0;
left : 150px;
margin : 0 0 0 20px;
_ margin : 0; / * 仅限IE6 * /
box-shadow : -1px 0 0 rgba(255,255,255,.3);
}
#菜单 ul li
{
float : none;
display : block;
border : 0;
_ line-height : 0; / * 仅限IE6 * /
box-shadow : 0 1px 0#111,0 2px 0#666;
}
# menu ul li:last-孩子
{
box-shadow : 无;
}
#菜单 ul a
{
padding : 10px;
width : 130px;
_ height : 10px; / * IE6仅* /
display : 阻止;
white-space : nowrap;
float : none;
text-transform : 无;
}
#菜单 ul a:悬停
{
background-color < span class =code-keyword>: #008ED2;
}
# menu ul li:first-chi ld > a
{
border-radius : 3px 3px 0 0;
}
#菜单 ul li:第一个孩子 > a:after
{
content : '';
position : 绝对值;
left : 40px;
top : -6px;
border-left : 6px实体透明;
border-right : 6px solid transparent;
border-bottom : 6px solid#444;
}
# menu ul ul li:first-child < span class =code-leadattribute> a:after
{
left : -6px;
top : 50%;
margin-top : -6px;
border-left: 0;
border-bottom: 6px solid transparent; $b $b border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
/*#menu ul li :first-child a:hover:after
{
border-bottom-color: #000;
}*/
#menu ul ul li:first-child a:hover:after
{
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
border-radius: 0 0 3px 3px;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
I have also add the following script in head section
<script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-latest.min.js\"></script>
< script type = text / javascript>
$(function () {
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
$('li').has('ul').mouseover(function () {
$(this).children('ul').css('visibility', 'visible');
}).mouseout(function () {
$(this).children('ul').css('visibility', 'hidden');
})
}
});
</script>(function () {
if (.browser.msie &&
.browser.version.substr(0, 1) < 7) {
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Mission & Vision</a></li>
</ul>
</li>
<li><a href="#">Project</a>
<ul>
<li><a href="#">Yashodara</a></li>
<li><a href="#">SLC</a></li>
<li><a href="#">CDP</a></li>
<li><a href="#">Avocacy</a></li>
</ul>
</li>
<li><a href="#">Collaborate</a>
<ul>
<li><a href="#">Sponsor a Child</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Rupee one</a></li>
<li><a href="#">Volunteering</a></li>
<li><a href="#">Companies</a></li>
</ul>
</li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#">Image</a></li>
<li><a href="#">Vedio</a></li>
</ul>
</li>
<li><a href="#">Report & Publication</a>
<ul>
<li><a href="#">Anual Report</a></li>
<li><a href="#">Audit</a></li>
<li><a href="#">Expanses Pattern</a></li>
<li><a href="#">Publication</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
MY CSS Is
#menu, #menu ul
{
margin: 0px;
padding: 1px;
list-style: none;
float: right;
}
#menu
{
min-width: 460px;
margin-top: 58px;
background: #0080C0;
border-left: 2px solid #0080C0;
border-top: 2px solid #0080C0;
border-radius: 10px 0 0 0;
}
#menu:before, #menu:after
{
content: "";
display: table;
}
#menu:after
{
clear: both;
}
#menu
{
zoom: 1;
}
#menu li
{
float: left;
border-right: 1px solid #fff;
position: relative;
}
#menu a
{
float: left;
padding: 12px 30px;
color: #fff;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
}
#menu li:hover > a
{
color: #fff;
background-color: #4AA5FF;
border-radius: 0px 0 0 0;
}
*html #menu li a:hover
{
/* IE6 only */
color: #ff0000;
}
#menu ul
{
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul
{
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul
{
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li
{
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child
{
box-shadow: none;
}
#menu ul a
{
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover
{
background-color: #008ED2;
}
#menu ul li:first-child > a
{
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
/*#menu ul li:first-child a:hover:after
{
border-bottom-color: #000;
}*/
#menu ul ul li:first-child a:hover:after
{
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
border-radius: 0 0 3px 3px;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
I have also add the following script in head section
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
$('li').has('ul').mouseover(function () {
$(this).children('ul').css('visibility', 'visible');
}).mouseout(function () {
$(this).children('ul').css('visibility', 'hidden');
})
}
});
</script>
(function () {
if (
.browser.msie &&
.browser.version.substr(0, 1) < 7) {