1

CSS ホバーでアクティブ化されるドロップダウン メニューがあります。しかし、IEはホバーコマンドを実行していません。ドロップダウンメニューをホバーなしで表示するように設定しようとしましたが、それは機能しますが、: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
4

1 に答える 1

2

doctype 宣言を確認してください。

IE9 では機能するが IE10 では機能しない Web サイトで問題が発生し、標準に変更する必要がありました。念の<DOCTYPE !html>ため、すべての doctype 宣言が正しく、重複していないことを確認してください。

于 2013-03-27T18:02:02.387 に答える