在使用 modernizr 后也无法在 ie8 和 ie7 上使用我的子菜单？

Question

同时使用 modernizr.js、css3-mediaqueries.js 和 HTML5shiv 脚本后，我的子菜单在悬停时仍无法在 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: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
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: &quot; &quot;;
    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&gt;a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover &gt; ul {
visibility: visible;
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
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: &quot; &quot;;
    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 &gt; ul ul:hover {
visibility: visible;
opacity: 1;
top: 0%;
}

.responsive-menu {
          display: none;
    padding: 20px 15px;
    margin: 0px;
    text-transform: uppercase;
    font-family: &quot;Open Sans&quot;,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;
}

谢谢！提前。

Answer 1

filter: alpha(opacity=0);
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;

上面两行是在制造问题......现在我解决了......

在使用 modernizr 后也无法在 ie8 和 ie7 上使用我的子菜单？

Not working my submenu on ie8 & ie7 after using modernizr also?

html

javascript

css

internet-explorer-8

internet-explorer-7