0

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


更新绝对看那个^网站上的代码，因为为了简洁起见，这只是我认为问题所在的一个片段。/update
这是 html 和 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 ***是的，我知道没有设置显示，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 链中的某处有关...

4

2 回答 2

0

终于找到了为什么 subnav 没有显示的答案：它被正确定位但是当：

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

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

于 2013-01-03T17:21:38.047 回答
0

因为您正在使用<nav>和section标记，而 IE9 不支持 That。您需要将nav, section标签替换为div

于 2013-01-03T00:27:33.520 回答