Question

我有一个使用CSS悬停激活的下拉菜单。但是IE没有做hover命令。我尝试将下拉菜单设置为不使用悬停显示，这样就可以了，但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

检查您的doctype声明。

我在IE9中工作的网站遇到了麻烦，但IE10却没有，必须更改为标准<DOCTYPE !html>另外，为了安全起见，确认所有的doctype声明都是正确的并且没有重复

IE10 Dropdown CSS不起作用

1 个答案: