網站元素在IE中不起作用

Question

在我為高中籃球隊工作的網站上，某些元素在Internet Explorer中不起作用。 該網站是hermantownbasketball.com。 男籃的側邊欄應該具有嵌套的下拉菜單，一個菜單是當您將鼠標懸停在團隊上方時，例如“高中”，而另一個菜單是當您將鼠標懸停在團隊下的年級，例如9年級。 這在chrome中可以正常工作，但是，我無法在任何版本的Internet Explorer中使用它。 以下是html和我正在使用的相應CSS的一部分。

不幸的是，我對CSS的了解不足，無法知道IE的哪一部分不喜歡IE或如何解決。

任何幫助是極大的贊賞！

的HTML

    <span class = "boyItem">
    <h3>High School</h3>

    <li class="group">
    <h4>9th Grade</h4>
    <div class = "nested">Schedule</div>
    <div class = "nested">Events</div>
    <div class ="nested">Forms</div>
    <div class ="nested">Calendar</div>
    </li>
    <li class="group">
    <h4>JV/Varsity</h4>
    <div class = "nested">Schedule</div>
    <div class = "nested">Events</div>
    <div class = "nested">Forms</div>
    <div class = "nested">Calendar</div>
    </li>

    </span>


    /* Creates the box around the title for each boy section. */
    .boyItem h3 { background:#1C23E8; 
    color:#EFFA20; 
    padding-right:2px; padding:10px; 
    font-size:18px; 
    margin-left:-30px; 
    margin-top:-10px;
    }

###CSS

    .boyItem h3:hover { background:#2A8FF5; }

    /* Prevents the boy sub-sections from being visable */
    .boyItem li h4 { position: absolute; left:-9999px; font-size:15px; list-style-type:none;} 

    /* Shows the boy sub-sections when user mouses over the section title. */
    .boyItem:hover li h4 { 
    position:relative; 
    left:10px; 
    background:#1C23E8; 
    color:#EFFA20;  
    padding-left:20px; 
    padding:5px;
    }

    .boyItem:hover li h4:hover { background:#2A8FF5;}


    .nested { position:absolute; 
    left:-9999px; 
    background:#352EFF; 
    color:#EFFA20; 
    padding-right:2px; 
    padding:4px; 
    font-size:14px; 
    margin:2px; 
    margin-left:30px; 
    margin-top:0px; 
    margin-right:0px; 
    margin-bottom:-2px;} 

    .group:hover .nested {position:relative; left:0px; } 
    .group:hover .nested:hover { background:#2A8FF5}

Answer 1

Internet Explorer以使用獨特的方法（實際和實際）標准而聞名。

試一試這個圖書館 。 無法保證會修復任何問題，但是絕對值得一試。