Question

代码

<html>
<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
        #topDropDownMenu {
            position: relative;
            background: no-repeat 100% 50%;
            width: 50em;
            max-width: 100%;
            float: left;
        }

            #topDropDownMenu li ul {
                width: 11em !important; /* leaves room for padding */
                cursor: default;
                position: absolute;
                height: auto;
                display: none;
                left: -10px;
                padding: 1px 10px 10px 10px;
                background: url(/img/clear.gif);
            }
            /* All LIs */

            #topDropDownMenu li {
                position: relative;
                width: 8.3em;
                max-width: 16.5%;
                cursor: pointer;
                float: left;
                list-style-type: none;
                font-weight: bold;
                border-style: solid;
                border-width: 1px;
                border-color: #222;
                text-align: center;
                -moz-border-radius: 8px 8px 0px 0px;
            }
                /* sub-menu LIs */

                #topDropDownMenu li ul li {
                    width: 8.3em /*FF*/;
                    padding: 0;
                    border: none;
                    max-width: 100%;
                    border: 1px solid #333;
                    border-top: none;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /* All anchors */

                #topDropDownMenu li a {
                    cursor: pointer !important;
                    color: #666;
                    text-decoration: none;
                    display: block;
                    float: left;
                    height: 2em;
                    line-height: 2em;
                    width: 100%;
                    -moz-border-radius: 8px 8px 0px 0px;
                }
                /* sub-menu Anchors */

                #topDropDownMenu li ul li a {
                    width: 8.3em /*FF*/;
                    position: relative !important;
                    cursor: pointer !important;
                    white-space: nowrap;
                    line-height: 1.7em;
                    height: 1.7em;
                    font-weight: normal;
                    color: #666;
                    background-position: 0 50% !important;
                    -moz-border-radius: 0px 0px 0px 0px;
                }
                /*hover*/

                #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active {
                    color: #000;
                    background: #fff;
                }
                /* display and z-index for the sub-menus */

                #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul {
                    display: block;
                    z-index: 10;
                    top: 2em !important;
                }

                #topDropDownMenu li#aboutDropDown {
                    z-index: 2;
                }

                #topDropDownMenu li#contactDropDown {
                    z-index: 1;
                }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul {
            display: block;
            top: -1000px;
        }

        #aboutDropDown a {
            background-color: #b9e075;
        }

        #contactDropDown a {
            background-color: #f7c472;
        }

        #topDropDownMenu li.msieFix a {
        }

        .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {
            position: absolute !important;
            top: 1028px !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="old_hover_menu.css" />
</head>
<body>
    <ul id="topDropDownMenu">
        <li id="aboutDropDown"><a href="#">About</a></li>
        <li id="contactDropDown"><a href="#">Contact</a><ul>
            <li><a href="#">Form</a></li>
            <li><a href="#">Information</a></li>
        </ul>
        </li>
    </ul>
</body>
</body></html>

问题： 当我将鼠标悬停在“联系人”菜单上时，它不会显示下拉菜单。它可以在IE6中兼容。

Answer 1

您可以使用此结构：

<!--[if lt IE 7]>      <html class="no-js lt-ie7"> <![endif]-->

并在您的元素的CSS文件中：

 .lt-ie7 yourDiv{
     //your Style
 }

我如何使以下代码IE6兼容？

1 个答案: