水平菜单在IE 8中消失

Question

我正在改造一个城镇避难所的基本网站。我试图给他们一些不错的东西，但不是华而不实或难以让任何人进去维护。我真的不想为IE 8编码，但我知道老年人和企业是最后一次更新他们的浏览器。无论如何，菜单在IE 8中消失了。我可以将鼠标悬停在它上面并查看看起来错误的子菜单。我是新手使用.htc文件“hack”进行圆角处理。我真的不想放弃，但我有最糟糕的时间搞清楚我错过了什么。无奈之下，我把behavior: url(border-radius.htc);扔到了整个地方，看看它是否是一个放置问题。

链接到练习网站：http://www.seenaomi.net/care-corp/pracindex.shtml

我喜欢我最终的结果。希望能够通过IE8取得任何帮助，我们将不胜感激。

IE 9中的兼容性视图显示了我正在谈论的内容。疯狂。

HTML：

    <ul id="coolMenu">

        <li><a href="index.shtml">Home</a></li>
        <li>
            <a href="#">History</a>
            <ul class="noJS">
                <li><a href="facts.shtml">Facts</a></li>
                <li><a href="staff.shtml">Staff</a></li>
            </ul>    
        </li>
        <li>
            <a href="programs.shtml">Programs</a>
            <ul class="noJS">
                <li><a href="gift.shtml">Donate</a></li>
                <li><a href="successstories.shtml">Successes</a></li>
            </ul>
        </li>
        <li>
            <a href="publications.shtml">Events</a>
            <ul class="noJS">
                <li><a href="facility.shtml">Pictures</a></li>
            </ul>    
        </li>
        <li>
            <a href="contact.shtml">Contact</a>
            <ul class="noJS">
                <li><a href="gift.shtml">Donate</a></li>
                <li><a href="Employment.shtml">Career</a></li>
                <li><a href="volunteer.shtml">Volunteer</a></li>
            </ul>    
        </li>
    </ul>

CSS：

#coolMenu,
#coolMenu ul {
    list-style: none;
    margin-right: 20px;
}
#coolMenu {
    float: right;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(border-radius.htc);
    border-style: none;
}
#coolMenu > li { float: left }
#coolMenu li a {
    display: block;
    line-height: 2em;
    text-decoration: none;
    padding: 0 2.1em 0 2.1em;
}
#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#coolMenu ul li a { width: 60px }
#coolMenu li:hover ul.noJS { display: block }
/* Main menu
       ------------------------------------------*/
#coolMenu {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    background-color: #5887B1;
    behavior: url(border-radius.htc);
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#coolMenu > li:hover > a {
    background-color: #CCCCCC;
    color: #000000;
    font-style: italic;
    font-weight: bolder;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(border-radius.htc);
    border-style: none;
}
/* Submenu
       ------------------------------------------*/
#coolMenu ul {
    background-color: #CCC;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(border-radius.htc);
    border-style: none;
}
#coolMenu ul li a {
    color: #000;
    font-weight: bold;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(border-radius.htc);
    border-style: none;
}
#coolMenu ul li:hover a {
    font-weight: bolder;
    font-size: 18px;
    font-style: italic;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior: url(border-radius.htc);
    border-style: none;
}