1
我有一個CSS下拉菜單，適用於大多數瀏覽器，但不適用於XP的某些舊版IE。除了我的許多學生仍然使用這個瀏覽器，因此我無法真正關心，因此使用該網站的能力有限。在這些較舊的IE瀏覽器上，只顯示HOME鏈接。CSS dropdown在舊IE瀏覽器中不起作用
這裏是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:[email protected]">[email protected]</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;
}
早期版本的IE不理解懸停在任何元素上，但標籤。您可以從http://peterned.home.xs4all.nl/csshover.html下載必要的文件 – jeff