css - IE 8 で水平メニューが消える

Question

町の避難所の基本サイトをリニューアル中です。私は彼らに素敵なものを与えようとしていますが、派手でなく、誰もが入って維持するのが難しいものではありません. 私は IE 8 用にコーディングしたくはありませんが、高齢者や企業がブラウザーを最後に更新することは知っています。いずれにせよ、IE 8 ではメニューが消えてしまいます。その上にカーソルを合わせると、間違っているように見えるサブメニューも表示されます。.htc角を丸くするために「ハック」ファイルを使用するのは初めてです。本当にあきらめたくはないのですが、何が欠けているのかを理解するのに最悪の時間を過ごしています. 必死に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;
}