我的弹出菜单上出现白色标记

如何解决我的弹出菜单上出现白色标记

| 我有一个弹出菜单div，它使用以下jQuery显示和隐藏：

$(\'#\' + mnu).show(\'slide\',{ direction: \'down\' },300);

在IE9中，它可以正确显示： ...但是在IE7中，它显示了一些奇怪的白色标记： 有人看过这样的东西吗？如何使IE7正常显示？ 如果有帮助，请参见以下HTML：

<div id=\"mainMenu\" style=\"display: block; \">
    <h2>Main menu</h2><img class=\"closeBtn\" src=\"images/closeBtn.png\">
    <nav id=\"mainNav\" type=\"list\">
        <li>
            <h3 tabindex=\"1\">Category 1</h3>
            <ul style=\"display: block;\">
                <li><a href=\"javascript:slides.goto(1);\" tabindex=\"1\">Item 1</a></li>
                <li><a href=\"javascript:slides.goto(2);\" tabindex=\"1\">Item 2</a></li>
                <li><a href=\"javascript:slides.goto(3);\" tabindex=\"1\">Item 3</a></li>
            </ul>
        </li>
        <li>
            <h3 tabindex=\"1\">Category 2</h3>
            <ul style=\"display: none;\">
                <li><a href=\"one.html\" tabindex=\"1\">Item 1</a></li>
                <li><a href=\"two.html\" tabindex=\"1\">Item 2</a></li>
            </ul>
        </li>
    </nav>
</div>

CSS：

#mainMenu {
    display:none;
    background-color:#fff;
    position:absolute;
    left:0px;
    bottom:40px;
    margin:0;
    padding:0;
    -moz-box-shadow: 0px 0px 10px #959595;
    -webkit-box-shadow: 0px 0px 10px #959595;
    box-shadow: 0px 0px 10px #959595;
    width:350px;
    border: 2px solid #00add0;
    z-index:101;    
    font-size:15px;
}
#mainMenu h2 {
    display:block;
    background-color:#00add0;
    margin:0;
    padding:0 3px;
    font-family: \'DIN Next W01 Regular\',Helvetica,Arial,sans-serif;
    font-size: 20px;
    text-transform:uppercase;
    font-weight:normal;
    color:#fff;
    vertical-align:middle;
}

#mainMenu nav li h3 {
    font-weight:normal;
    font-size:15px;
    padding: 0 0 0 20px;
    margin:0;
}

#mainMenu nav li {
    display: block;
    list-style:none;
    background-color:#333;
    color:#fff;
    margin:0;
    padding:3px 0;
    cursor:pointer;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #242424;
    background-image:url(\'../images/twistArrowRight.gif\');
    background-repeat:no-repeat;
    background-position:5px 5px;
}

#mainMenu nav li ul {
    padding:3px 0 3px 20px;
    margin:0;
}

#mainMenu nav li ul li {
    display: block;
    list-style:decimal;
    margin:0 0 0 -20px;
    padding:3px 0 3px 0px;
    cursor:pointer;
    border-top:0;
    border-bottom:0;
    background-image:none;

    font-size:12px;
    text-decoration:underline;
}

#mainMenu nav ul li a {
    display:block;
    color:#fff;
    font-size:12px;
    padding:0 0 0 40px;
}

#mainMenu nav ul li a:hover,#mainMenu nav ul li a:focus {
    background-color:#444;
}

非常感谢     

解决方法

        IE7不支持HTML5，因此

nav

是未知的。我认为IE7将儿童

li

元素包裹在ѭ5中，您会发现子弹。 但是

li

元素根本不应该是

nav

的直系子代。据我所知，它们必须在列表中。