0
在使用modernizr.js，css3-mediaqueries.js和HTML5shiv脚本之后，我的子菜单在悬停时仍未在ie8和ie7中打开。请帮助解决我的问题。这里不用我的菜单代码 -使用modernizr后ie8和ie7上的子菜单不工作吗？
HTML
<nav>
<a class='responsive-menu' href='#' id='resp-menu'>
<div style='width: 35px; cursor: pointer; float: left ! important; box-sizing: border-box; transform: none ! important; background: rgb(246, 246, 246) none repeat scroll 0% 0%; margin-right: 10px; padding: 7px; margin-top: -7px; display: block; border: 2px solid rgb(228, 228, 228); border-radius: 3px; vertical-align: middle;'>
<hr class='cb-ico' style='margin-top: 0px ! important;'/>
<hr class='cb-ico'/>
<hr class='cb-ico'/></div>Menu</a>
<ul class='menu' id='menu'>
<li><a class='homer' href='/'><i class='fa fa-home'/> HOME</a></li>
<li><a href='#'><i class='fa fa-globe'/> INTERNET</a>
<ul class='sub-menu'>
<li><a href='/search/label/SEO'>SEO</a></li>
<li><a href='/search/label/CSS'>CSS</a></li>
<li><a href='/search/label/JQUERY'>JQUERY</a></li>
<li><a href='/search/label/JAVASCRIPT'>JAVASCRIPT</a></li>
<li><a href='/search/label/Downloads'>Downloads</a></li>
<li><a href='/search/label/'>Sub-Menu 6</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-wrench'/> WEB TOOLS</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a></li>
<li><a href='#'>Sub-Menu 3</a></li>
<li><a href='#'>Sub-Menu 4</a></li>
<li><a href='#'>Sub-Menu 5</a></li>
<li><a href='#'>Sub-Menu 6</a></li>
</ul>
</li>
<li><a href='/search/label/Tutorials'><i class='fa fa-comments'/> TUTORIALS</a></li>
<li><a href='/p/contact.html'><i class='fa fa-envelope'/> CONTACT</a></li>
<li><a href='/p/cr-sitemap.html'><i class='fa fa-sitemap'/> SITEMAP</a></li>
<li><a href='/p/terms-of-service.html'><i class='fa fa-paperclip'/> TERMS OF SERVICE</a></li>
<li><a href='/p/privacy-policy.html'><i class='fa fa-lock'/> PRIVACY POLICY</a></li>
<form action='/search' id='search' method='get' style='float:right;margin-right:2em'>
<input name='q' placeholder='Search...' size='40' type='text'/>
</form>
</ul>
</nav>
CSS
html {
-webkit-font-smoothing: antialiased;
} body{font-size:15px;}
nav {
display: block;
background:#374147;
width:100%;
z-index:9999999;
-webkit-transition: all 500ms ease 0s;
-moz-transition: all 500ms ease 0s;
-ms-transition: all 500ms ease 0s;
-o-transition: all 500ms ease 0s;
transition: all 500ms ease 0s;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
.menu {
display: block;
margin:0px;
}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.114s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
-moz-transition: all 0.114s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
-ms-transition: all 0.114s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
-o-transition: all 0.114s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
-webkit-transition: all 0.114s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}
.menu li a:hover,.menu li:hover > a {
color: #fff;
background: #9ca3da;
}
.menu ul {
visibility: hidden;
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
margin: 0px;
padding: 0px;
width: 170px;
position: absolute;
left: 0px;
background: #FFF none repeat scroll 0% 0%;
z-index: 99;
transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
top: 200%;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #9ca3da;
color: #fff;
}
.menu li:hover > ul {
visibility: visible;
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
top: 100%;
}
.menu ul ul {
left: 169px;
top: 0% !important;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li > ul ul:hover {
visibility: visible;
opacity: 1;
top: 0%;
}
.responsive-menu {
display: none;
padding: 20px 15px;
margin: 0px;
text-transform: uppercase;
font-family: "Open Sans",sans-serif;
background:rgb(240, 240, 235) none repeat scroll 0% 0% !important;
box-shadow: none !important;
border-bottom: 1px solid #EAE9E9;
font-weight: 600;
font-size: 17px;
}
.responsive-menu:hover{
background: #374147;
color: #fff;
text-decoration: none;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a.homer {
background: #9ca3da;
}
谢谢！提前。
您使用了大量的CSS未在IE8和下方支撑，如过渡和不同前缀键等等。使用modernizr并不是真的神奇地让旧浏览器做动画和他们根本不支持的东西。 – adeneo
@adeneo是正确的。如果你愿意，你可以使用modernizer为IE添加你自己的新CSS。只是一个简单的li：悬停.sub菜单{显示：块}等 – RMH
但我想在mozilla和其他最新的浏览器中使用转换，所以怎么办 –