1

我正在改造镇上避难所的基本场地。我试图给他们一些不错但不浮华或难以让任何人进入和维护的东西。我真的不想为 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;
}
4

0 回答 0