为什么我在 IE8 /IE9 中看不到这个子导航？切换到显示块不显示

Question

我真的很讨厌这样直接问一个问题，但我一直在试图弄清楚为什么左边的子导航（悬停在“关于我们”上）几个小时都不会出现在 IE 中，而我不能在小提琴中重新创建问题：-/ 这是网站：
http://quinnhr.adsinchosting5.com/

更新一定要看看那个^网站上的代码，因为这只是我认为问题所在的sn-p简洁。 /更新
这是html的sn-p和css：

        <nav> <!-- left sidebar -->
            <ul>
                <li>
                    <a href="#"> Capabilities </a>
                </li>
                <li>
                    <a href="#"> Pricing </a>
                </li>
                <li>
                    <a href="#">About Us</a>
                    <ul id="subNizzle"> <!-- this UL is the issue, see css -->
                        <li class="subNav">
                            <a href="#">someone's name</a>
                        </li>
                        <li class="subNav">
                            <a href="#">some else's name</a>
                        </li>
                        <li class="subNav">
                            <a href="#">another name</a>
                        </li>
                    </ul>
                </li>

CSS ***是的，我知道 display none 已设置，jquery 代码会在悬停时覆盖它，请参阅 quinnhr.adsinchosting5.com 获取代码。关闭

section aside: first-of-type ul li a{
display:table-cell;
}

至少使子导航显示出来，但它显示在现有导航的顶部并通过以下方式将其向右移动：

section aside:first-of-type ul li a{
 position: absolute;
 }
 section aside:first-of-type ul li ul{
 position: absolute;
 right:-100px;
 z-index: 1000;
 }

将它移到足够的右侧，使其显示并说明它被隐藏在导航之外...

  section aside:first-of-type ul {
  display: table;
  margin-left: 70px;
  margin-top: 25px;
  padding: 0px;
  position: absolute; }

section aside:first-of-type ul li {
  display: table;
  height: 45px;
  position: relative;
  width: 180px; }

section aside:first-of-type ul li a {
  color: #F0EBDA;
  display: table-cell; 
  height: 45px;
  text-decoration: none;
  text-indent: 10px;
  vertical-align: middle; 
  position:absolute;  /* update */
}


section aside:first-of-type ul li ul {
  display: none;
  margin: -45px 0px 0px 179px;
  padding: 0px;
  position:absolute; /* update */
  right: -100px;    /* update */
}

jQuery: 查询（文档）.ready（函数（$）{

$('li a').addClass("nahbro");
$('ul li ul').css({"margin-left": "-10px", "padding" : "0px", "margin-top" : "-45px"});
$('li').hover(function(){
    $(this).switchClass("nahbro", "prepare", 400);
    $('#subNizzle', this).fadeIn().switchClass("nahbro", "prepare", 300);
    $('.subNav').hover(function(){
        $(this).switchClass("prepare", "liSelected", 200);
    },function(){
        $(this).switchClass("liSelected", "prepare", 200);
    });

}, function(){
    $(this).switchClass("prepare", "nahbro", 400);
    $('#subNizzle', this).fadeOut().switchClass("liSelected", "nahbro", 500);

});

我认为它与 display:table / display: table-cell / display: block 链中的某处有关...

Answer 1

终于找到了为什么 subnav 没有显示的答案： 它定位正确，但在以下情况下：

滤镜：progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d9090', endColorstr='#545e5f',GradientType=0);

被应用，由于某种原因，它隐藏了过滤器范围之外的所有内容。 这很古怪。 但至少现在我知道了。

Answer 2

因为您使用的是<nav> 和section 标签，而IE9 不支持该标签。你需要用div替换nav, section标签