css - このメニュー css が Internet Explorer 8 では機能せず、chrome、firefox などでは機能するのはなぜですか?

Question

私のサイトの私のメニューコードを見てください。このサイトでソースと css ファイルを表示できます: http://a4um.com/menu.php

Answer 1

html 5 タグを使用しました。nav,header は無効です。つまり、下位バージョンでは有効ではないため、以下のコードに従ってください。役立つ場合があります。

 <div id="big_wrapper">
            <div id="top_header">
    <div class="nav">
                <ul>
                    </li>
                    <li id="moreButton"><a href ="#" class = "hide">
                        Menu
                    </a>
                    <ul>
                        <li id = "second"><a href="#">Logout</a></li>
                        <br>

                                    <li id = "second"><a href="#">Mail</a></li>
                    </ul>
                    </li>
                </ul>
            </div>
    </div>
    </div>


*{
     margin: 0px;
     padding:0px;
}

.hide{
    color: white;
    text-decoration:none;
}
.hide:link{
    color: white;
    text-decoration:none;
}
.hide:visited{
    color: white;
    text-decoration:none;
}
.hide:hover{
    color: white;
    text-decoration:none;
}
.hide:active{
    font: bold 23px Tahoma;
    color: white;
    text-decoration:none;
}


header,section,footer,aside,nav,article,hgroup{
    display:block;
}
body{
    width:100%;
    height:110%;
    display:-webkit-box;
    -webkit-box-pack: center;
    overflow-y: scroll;
    overflow-x: scroll;
    overflow: -moz-scrollbars-vertical;
}
#big_wrapper{
    position:absolute;
    top: 0; right: 0; bottom:0; left:0;

    background:#F0F0F0;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1
}
#top_header{
    background: #252525;
    display:inline-block;
    border: 1px solid grey;
    border-left:1px solid black;
    -webkit-box-orient:horizontal;
    -webkit-box-flex:1;
    color: white;
    position:absolute;
    right:0;left:0;
}
#logoThing{
    width:100px;
    font: bold 25px Tahoma;
    padding-left:300px;
    padding-right:20px;
}
#otherTopStuff{
    width:120px;
    font: bold 25px Tahoma;
    border-left: 1px solid grey;
    padding-left:20px;
    padding-right:20px;
}
#moreButton{
    width:30px;
    font: bold 25px Tahoma;
    border-left: 1px solid grey;
    padding-left:5px;
}
#userID{
    width:120px;
    font: bold 25px Tahoma;
    padding-right:20px;
}
#top_header li{
    display:inline-block;
    list-style:none;
}
#loginStuff{
    font: bold 12px Tahoma;
    padding:0px;
    margin:0px;
}


#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}

#new_div2{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    border-top:80px solid #F0F0F0;


}

#otherForms{
    background:white;
    width: 300px;
    border-top: 5px solid white;
    text-align:left;

}
#whiteSpace{
    background:white;
    border-top:1px solid white;
    border-radius:10px;
    bottom:0;
    width:900px;
    padding:20px;
    -webkit-box-flex:1;


}
#signupTitle{
    font: bold 18px Tahoma;
}
#theForms{

    padding-top:20px;

}
#textBox{
    float:right;
}
#submitButton{

    float:center;

}
#aligning{
    text-align:center;
}

#the_footer{
    text-align:center;
    padding:20px;
    border-top:2px solid black;
}

.nav ul ul {
    display: none;
}

    .nav ul li:hover  ul {
        display: block;
    }
    .nav ul:after {
        content: ""; clear: both; display: block;
    }
.nav ul li {
    float: left;
}
        .nav ul li:hover a {
            color: #fff;
        }

.nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    .nav ul ul li {
        position: relative;
    }
        .nav ul ul li a {
            padding: 0px 10px;
            color: #fff;
        }   
            .nav ul ul li a:hover {
                background: #4b545f;
            }