Question

这是我的代码，它在IE 10中无法正常工作，但是，它在Google Chrome中完美运行。我感谢您的帮助。提前致谢。

<ul id="css3_menu"> 
    <li><a href="#">Home </a></li> 
    <li><a href="#">Juniors </a> 
    <ul> 
    <li><a href="#">Coursebook</a></li> 
    <li><a href="#">Novels for Juniors</a> 
    <ul> 
    <li> <a href="#">William  Thackeray </a> 
    <ul> 
    <li> <a href="#">Vanity Fair</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Charles Dickens</a> 
    <ul> 
    <li> <a href="#">Hard Times</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Leo Tolstoy</a> 
    <ul> 
    <li> <a href="#">Anna Karenina</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Oscar Wilde</a> 
    <ul> 
    <li> <a href="#">The Picture of Dorian Gray</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">Thomas Hardy</a> 
    <ul> 
    <li> <a href="#">Tess of the d’Urbervilles</a></li> 
    </ul> 
    </li> 
    <li> <a href="#">H. G. Wells</a> 
    <ul> 
    <li> <a href="#">The War of the Worlds</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li><a href="#">Lecture I</a></li> 
    <li><a href="#">Lecture II</a></li> 
    <li><a href="#">Lecture III</a></li> 
    <li><a href="#">Lecture IV</a></li> 
    <li><a href="#">Lecture V</a></li> 
    <li><a href="#">Lecture VI</a></li> 
    </ul>    
</li> 
<li><a href="#">Contact us</a></li></li></ul>

Answer 1

我无法在IE10中测试，但我注意到最后有一个结束li标记。看看这段代码是否有效：

<ul id="css3_menu"> 
    <li><a href="#">Home </a></li> 

    <li><a href="#">Juniors </a> 
        <ul> 
            <li><a href="#">Coursebook</a></li> 
            <li><a href="#">Novels for Juniors</a> 

                <ul> 

                    <li> <a href="#">William  Thackeray </a>
                        <ul>
                            <li><a href="#">Vanity Fair</a></li>
                        </ul> 
                    </li> 

                    <li> <a href="#">Charles Dickens</a>
                        <ul>
                            <li><a href="#">Hard Times</a></li>
                        </ul> 
                    </li> 

                    <li> <a href="#">Leo Tolstoy</a>
                        <ul>
                            <li><a href="#">Anna Karenina</a></li>
                        </ul>
                    </li> 

                    <li> <a href="#">Oscar Wilde</a>
                        <ul>
                            <li> <a href="#">The Picture of Dorian Gray</a></li>
                        </ul>
                    </li> 

                    <li> <a href="#">Thomas Hardy</a> 
                        <ul>
                            <li><a href="#">Tess of the d’Urbervilles</a></li>
                        </ul> 
                    </li> 

                    <li> <a href="#">H. G. Wells</a> 
                        <ul>
                            <li><a href="#">The War of the Worlds</a></li>
                        </ul> 
                    </li>

                </ul> 

            </li> 
            <li><a href="#">Lecture I</a></li> 
            <li><a href="#">Lecture II</a></li> 
            <li><a href="#">Lecture III</a></li> 
            <li><a href="#">Lecture IV</a></li> 
            <li><a href="#">Lecture V</a></li> 
            <li><a href="#">Lecture VI</a></li> 
        </ul>    
    </li> 

<li><a href="#">Contact us</a></li>
</ul>

Answer 2

这是代码：

#css3_menu { 
    width: 960px; 
    margin: 0px auto; 
    border: 1px solid #333; 
    border-top:none!important; 
    background-color: #333; 
    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 } 

#css3_menu, #css3_menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 


#css3_menu:before, 
#css3_menu:after { 
    content: ""; 
    display: table; 
} 

#css3_menu:after { 
    clear: both; 
} 


#css3_menu li { 
    float: left; 
    border-right: 1px solid #111; 
    -moz-box-shadow: 1px 0 0 #444; 
    -webkit-box-shadow: 1px 0 0 #444; 
    box-shadow: 1px 0 0 #444; 
    position: relative; 
} 

#css3_menu a { 
    float: left; 
    padding: 15px 30px; 
    color: #979797; 
    letter-spacing: 4; 
    text-transform:inherit; 
    font-family: Verdana, Helvetica; 
    font-size: 14px; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#css3_menu li a:hover { 
    background: #333; 
} 

#css3_menu li:hover > a { 
    color: #fafafa; 
} 

*html #css3_menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} 

#css3_menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 47px; 
    left: 0; 
    z-index: 1;    
    background: #333; 
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3); 
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);    
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out;  
}
 #css3_menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

#css3_menu ul ul { 
    top: 0; 
    left: 174px; 
    margin: 0 0 0 20px; 
    _margin: 0; /*IE6 only*/ 
    -moz-box-shadow: -1px 0 0 rgba(210,210,210,.2); 
    -webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2); 
    box-shadow: -1px 0 0 rgba(210,210,210,.2);        
} 

#css3_menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} 


 #css3_menu ul a {    
    padding: 12px; 
    width: 150px; 
    color: #979797; 
    _height: 12px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

#css3_menu ul a:hover { 
    background-color:#3d3d3d; 
    color: #fff; 

}

下拉菜单css3菜单在IE10中不起作用

2 个答案: