IE10 下拉 CSS 不工作答案

【问题标题】：IE10 Dropdown CSS Not WorkingIE10 下拉 CSS 不工作
【发布时间】：2013-12-19 00:29:03
【问题描述】：

我有一个通过 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

【问题讨论】：

这是一个长镜头，但你的 doctype decleration 是什么？
@napo190 哈哈，你知道吗？当我删除代码以查找干扰代码时，我发现不知何故我有两个文档类型，而第一个甚至还没有完成。删除了额外的 doctype 和 bam，它起作用了。有趣的是，只有 IE 被文档类型破坏了。把它作为答案，我会接受它！谢谢。
我有时会在 Chrome 中运行网站以检查是否有任何错误。您是否完全使用开发人员工具？它很棒，因为它会拾取任何错误或警告。在你的情况下，我敢打赌 chrome 会选择重复的 doctype decleration 并给你一个警告。

标签： html css internet-explorer drop-down-menu

【解决方案1】：

检查您的文档类型声明。

我在一个在 IE9 中工作但在 IE10 中没有的网站遇到问题，不得不更改为标准 <DOCTYPE !html> 另外，为了安全起见，请确认您的所有 doctype 声明都是正确的并且没有重复。

【讨论】：