이전 IE 브라우저에서 CSS 드롭 다운이 작동하지 않습니다.

Question

대부분의 브라우저에서 작동하지만 일부 이전 버전의 IE에서는 작동하지 않는 CSS 드롭 다운 메뉴가 있습니다. 많은 학생들이 여전히이 브라우저를 사용하고 있으므로 사이트를 사용할 수있는 능력이 제한되어 있다는 점을 제외하고는별로 신경 쓰지 않을 것입니다. 이 이전 IE 브라우저에서는 HOME 링크 만 표시됩니다.

다음은 HTML 다음에 CSS가 있습니다. 문제를 일으키는 원인을 파악할 수 있습니까? http://www.browserstack.com/screenshots/46848552eb08ea8bb0ca0b10c4843ed8cb6cfb3e

HTML

<div id="nav"> 
<ul id="menu"> 
    <li class="medial"> 
     <a href="http://www.anthonyteacher.com/">HOME</a> 
    </li> 
    <li class="medial"> 
     <a href="http://www.anthonyteacher.com/about/" title="About AnthonyTeacher.com">ABOUT</a> 
    </li> 
    <li class="medial"> 
     <a href="http://www.anthonyteacher.com/portfolio/" title="My Portfolio">PORTFOLIO</a> 
    </li> 
    <li class="medial"><a href="#" title="Course Homepages">COURSES</a> 

     <ul class="sub-menu"> 
      <li> 
       <a href="http://www.anthonyteacher.com/category/courses/2014s-liec/">Low Intermediate Conversation</a> 
      </li> 
      <li> 
       <a href="http://www.anthonyteacher.com/category/courses/2014s-hiec/">High Intermediate Conversation</a> 
      </li> 
      <li> 
       <a href="http://www.anthonyteacher.com/category/courses/2014s-elt/">ELT Practice</a> 
      </li> 
      <li> 
       <a href="http://www.anthonyteacher.com/category/courses/2014s-tesol/">TESOL Practicum</a> 
      </li> 
      <li> 
       <a href="http://www.anthonyteacher.com/oldercourses" title="View Previous Courses">Older Courses</a> 
      </li> 
     </ul> 
    </li> 
    <li class="medial"><a href="http://www.anthonyteacher.com/category/studentwork" title="Archive of work my students have done in my courses">STUDENT WORK</a> 
    </li> 
    <li class="medial"><?php add_thickbox(); ?> 
<a href="https://www.google.com/calendar/embed?src=4skddvl4euub3lj8qr88csf058%40group.calendar.google.com&ctz=Asia/Seoul?TB_iframe=true&width=600&height=550" class="thickbox" title="View my course schedule">CALENDAR</a> 
    </li> 
    <li><a href="#">CONTACT</a> 

     <ul class="sub-menu"> 
      <li> 
       <a href="mailto:anthony.teacher@yahoo.com">anthony.teacher@yahoo.com</a> 
      </li> 
      <li> 
       <a class="smcf-link" href="http://www.anthonyteacher.com/email-me/">Contact Form</a> 
      </li> 
     </ul> 
    </li> 
    <li class="social"><a href="http://www.facebook.com/anthony.teacherr" target="_blank" title="My Facebook Account for Students"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Facebook.png" width="35px" alt="Facebook" /></a><a href="http://www.twitter.com/AnthonyTeacher" target="_blank" title="View my ELT-related Tweets"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Twitter.png" width="35px" alt="Twitter" /></a><a href="http://www.youtube.com/anthonyteacher" target="_blank" title="All my YouTube Videos"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Youtube.png" width="35px" alt="YouTube" /></a><a href="http://lnkd.in/zkM8DU" target="_blank" title="See my LinkedIn Profile"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Linkedin.png" width="35px" alt="LinkedIn" /></a> 
</li> 
</ul> 
</div> 

CSS

/* new menu */ 
#nav { 
    background-image:url('http://www.anthonyteacher.com/wp-content/themes/blank2L/menubar.jpg'); 
    background-repeat:repeat-x; 
    font: bold 12px arial; 
    width:100%; 
    height: 29px; 
} 

/*Initialize*/ 
ul#menu, ul#menu ul.sub-menu { 
    padding:0; 
    margin: 0; 
} 
ul#menu li.medial { 
     background: url('http://www.anthonyteacher.com/wp-content/themes/blank2L/orangeborder1.gif'); 
    background-repeat:no-repeat; 
    background-position:right; 
} 
ul#menu li, ul#menu ul.sub-menu li { 
    list-style-type: none; 
    display: inline-block; 
} 
/*Link Appearance*/ 
ul#menu li a { 
    text-decoration: none; 
    color: #fff; 
    padding: 5px; 
    display:inline-block; 
    margin-top: 2px; 
    margin-right: 5px; 
    margin-left: 5px; 
} 
ul#menu li a:hover { 
    background: #555555; 
    color: #fff 
} 

/*Make the parent of sub-menu relative*/ 
ul#menu li { 
    position: relative; 
} 
/*sub menu*/ 
ul#menu li ul.sub-menu { 
    display:none; 
    background-color: #fff; 
    border: 1px solid black; 
    position: absolute; 
    top: 28px; 
    margin-left: 10px; 
    margin-top: -10px; 
    width: auto; 
    padding: 5px; 

} 
ul#menu li ul.sub-menu li a { 
     color: #000; 
     font-weight:normal; 
} 
ul#menu li ul.sub-menu li a:hover { 
     color: #000; 
     font-weight:normal; 
     background-color: #ff0000; 
} 
ul#menu li:hover ul.sub-menu { 
    display:block; 
} 
ul#menu li.social { 
    list-style: none; 
    float: right; 
    margin-top: 5px; 
} 
ul#menu li.social a { 
    margin: -11px -5px; 
    } 
ul#menu li.social a:hover { 
    background: none; 
    } 

Answer 1

이 selectivizr.com 같은 것을 사용을 고려 : 다음은 스택의 스크린 샷 일부 브라우저입니다.

@jeff가 지적한 것처럼 초기 Internet Explorer 빌드에서는 <a> 이외의 언어에 :hover을 기본적으로 지원하지 않습니다. 학생들이 자바 스크립트가 켜져 있다고 가정하면 (실제로 어두운 연령대에 있지 않는 한) Selectivizr는 아무 것도 변경하지 않고 문제를 해결해야합니다.