html - 下拉 IE 8 及以下版本不工作

Question

您好，我刚刚重新设计了我的网站以包含下拉菜单，但我今天了解到 IE 8 及更低版本无法正确显示它们。据我所知，它在所有其他浏览器上都显示良好。 我不知道我哪里出错了，但我一直在调试，但一直没能弄明白。

如有任何帮助，我们将不胜感激!

这是一个带有我的 html 和 css 的 jsfiddle:http://jsfiddle.net/scTqy/

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

---

(这是在js fiddle 里)

这是我的 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