下拉IE 8及以下版本无法正常工作

Question

嗨，我刚刚完成了网站的重新设计，以包含下拉菜单，但今天我了解到IE 8及更低版本的IE 8不会正确显示它们。 据我所知，它在其他所有浏览器上都可以正常显示。 我不知道哪里出了问题，但我一直在调试并且无法弄清楚。

任何帮助将非常感激！

这是带有我的html和CSS的jsfiddle： http : //jsfiddle.net/scTqy/

这是实时网站的链接： http : //www.hearditfrom.com

---

（这是在js小提琴）

这是我的html / php：

        <nav id="hb2_nav">
       <ul>
    <li><a class="hb2_nav" href="category.php">Categories <span class="arrow-down"></span></a>
    <ul class="drop-shadow">
    <span class="category_column">
    <li><a href="category.php?category=1">U.S.</a></li>
    <li><a href="category.php?category=2">World</a></li>
    <li><a href="category.php?category=3">Business</a></li>
    <li><a href="category.php?category=4">Economy</a></li>
    <li><a href="category.php?category=5">Entertainment</a></li>
    </span>
    <span class="category_column">
    <li><a href="category.php?category=6">Health</a></li>
    <li><a href="category.php?category=7">History</a></li>
    <li><a href="category.php?category=8">Odd News</a></li>
    <li><a href="category.php?category=9">Politics</a></li>
    <li><a href="category.php?category=10">Science</a></li>
    </span>
    <span class="category_column_last">
    <li><a href="category.php?category=11">Special Reports</a></li>
    <li><a href="category.php?category=12">Sports</a></li>
    <li><a href="category.php?category=13">Technology</a></li>
    </span>

    </ul></li>
    <li><a class="hb2_nav" href="">Add </a></li>
    <li><a class="hb2_nav" href="">Edit </a></li>
    </ul>
    </nav>

这是我的CSS：

   #hb2_nav
   {
     font-size:18px;
     line-height: 55px;
     float:right;
     height:55px;
     margin:0px;
     margin-top:0px;
     padding:0px;
     display:inline;
    }

        #hb2_nav ul ul {
        display: none;
        color: #333;
    }

    #hb2_nav ul li:hover ul {
        display: block;
    }

    #hb2_nav ul {
        list-style: none;
        position: relative;
        display: inline-table;
    }

    #hb2_nav ul:after {
        content: ""; clear: both; display: block;
    }

    #hb2_nav ul li {
        float: left;
    }
    #hb2_nav ul li:hover {
        background: none;
    }
    #hb2_nav ul li:hover a {
        text-decoration:none;
        padding-left: 10px;
        padding-right:10px;
    }

    #hb2_nav ul li a {
        text-decoration:none;
        display: block; /*padding: 25px 40px;
        color: #757575; text-decoration: none;*/
    }

    #hb2_nav ul ul {
        background: #ffffff; /*#FFF8F0;*/ 
        border-radius: 0px; 
        padding: 0;
        position: absolute; 
        top: 100%;
        width:100%;
        min-width:250px;
        max-width: 400px;
        z-index:10000;
        border: 2px solid #999;
    }

    #hb2_nav ul ul:before {
        content:"";
        display:block;
        width:0;
        border:15px solid #999;
        border-color:transparent transparent #999 transparent;
        position:absolute;
        bottom:100%;
        left:20px;
        margin-left:-10px;
    }



    #hb2_nav ul ul li {
        float: none; 
        background: #ffffff;
        width: 100%;
        position: relative;
        text-align:left;
        font-size: 14px;
        line-height: 24px;
    }

    #hb2_nav ul ul li a {
        color: #333;
        padding: 10px 20px;
    }
    #hb2_nav ul ul li:hover a {
        background: #e8e8e8;
    }

Answer 1

您使用了<nav> ，这是HTML5元素，IE8和更低版本不支持。

仅使用HTML4.01标签和JavaScript，以更好地支持旧版浏览器。

参考： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/nav