html - IE10 下拉菜单 CSS 不工作

Question

我有一个通过 CSS 悬停激活的下拉菜单。但是 IE 没有执行悬停命令。我试过将下拉菜单设置为在没有悬停的情况下出现，这很有效，但是 li 上的 :hover 不会做任何事情。

HTML:

            <div id="pilatesNav">
                <ul>
                    <li id="first" class="first mainNav"><a href="studio"><p>Studio</p></a>
                        <ul>
                            <li><a href="etiquette"><p>Etiquette</p></a></li>
                        </ul>
                    </li>
                    <li class="mainNav"><a href="about"><p>About</p></a>
                        <ul>
                            <li><a href="instructors"><p>Instructors</p></a></li>
                            <li><a href="testimonials"><p>Testimonials</p></a></li>
                            <li><a href="community"><p>Community</p></a></li>
                        </ul>
                    </li>
                    <li class="mainNav"><a href="classes"><p>Classes</p></a></li>
                    <li class="mainNav"><a href="beginners"><p>Beginners</p></a></li>
                    <li class="mainNav"><a href="schedule"><p>Schedule</p></a></li>
                    <li class="mainNav"><a href="videos"><p>Videos</p></a></li>
                    <li class="last mainNav"><a href="contact"><p>Contact</p></a></li>
                    <div class="clear"></div>
                </ul>
            </div>

CSS

#pilatesNav{
        width: 100%;
        margin-bottom: 10px;
        overflow: visible;

        ul{
            list-style-type: none;
            overflow: visible;


            li{
                position: relative;
                text-align: center;
                z-index: 2;
                float: left;
                margin-right:85px;
                overflow: visible;

                a{
                    display: block;
                    color: #666;

                    &:hover{
                        color: lighten(@bg, 20%); 
                    }
                }
                ul{
                    position: absolute;
                    left: -9999px;
                    width: 137px;
                    text-align: center;
                    list-style-type: none;
                    background-color: @bg;
                    border-left: 1px solid darken(@bg, 10%);
                    border-right: 1px solid darken(@bg, 10%);
                    border-bottom: 1px solid darken(@bg, 10%);
                    .drop-shadow(0px, 6px, 5px, -7px, #111, 50%);

                    li{
                        display: block;
                        a{
                            display: block;
                        }
                        width: 100%;
                        padding: 5px 0px;
                        &:hover{
                            a{
                                color: lighten(@bg, 20%);
                            }
                            &:before{
                                width: 0;
                                height: 0;
                            }
                            .gradient(@bg, darken(@bg, 6%), @bg);
                        }
                    }
                }
                &:hover{
                    &:before{
                        position: absolute;
                        left: -15px;
                        content: '';
                        height: 25px;
                        width: 5px;
                        background-color: transparent;
                        border-left: 1px solid darken(@bg, 10%);
                    }
                    ul{
                        left: -15px;
                    }
                }
                &.first{
                    text-align: left;
                }
                &.last{
                    margin-right: 0px;
                    text-align: right;
                }
            }
        }
    }//End Nav

Answer 1

检查您的文档类型声明。

我在我们的网站上遇到了麻烦，该网站在 IE9 中运行但在 IE10 中不起作用，不得不更改为标准 <DOCTYPE !html>此外，为了安全起见，请确认您所有的文档类型声明都是正确的并且没有重复。