下拉导航菜单在 Internet Explorer 中不起作用
http://wnmu.publicbroadcasting.net/test.html
我试图在此处获取菜单在职的。在 Firefox 和 Chrome 中完美运行，但在 Internet Explorer 中不起作用。我尝试了 IE8 和 IE9，包括兼容性视图，但根本没有出现任何下拉菜单。
这是标题中的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?xml version="1.0"?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="http://wnmufm.org" target="_self"><img src="http://www.wnmufm.org/wp-content/uploads/2011/05/pr90-banner.jpg" border="0"></a><br>
<div id="nav">
<ul id="menu" class="menu">
<li><a href="http://wnmu.publicbroadcasting.net/index.html">Home</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain">News</a>
<ul class="menu">
<li><a href="http://events.publicbroadcasting.net/wnmu/events.eventsmain">Events Calendar</a></li>
<li><a href="http://wnmufm.org/category/news/">Regional News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain?action=section&SECTION_ID=2">National News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain?action=section&SECTION_ID=3">World News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/arts.artsmain">Arts News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain?action=section&SECTION_ID=5">Business News</a></li>
<li><a href="http://wnmufm.org/schoolclosings/">School Closings</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/localprograms">Programming</a>
<ul class="menu">
<li><a href="http://wnmufm.org/localprograms">Local Programs</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/guide.guidemain">Program Guide</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/guide.guidemain?action=searchPlaylist&playlistID=0">Search Playlist</a></li>
<li><a href="http://wnmu.publicbroadcasting.net/media/Preview%20PDF/WNMU-FM_Preview_May11.pdf">Download May Preview</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/livestream">Listen to PR90</a>
<ul class="menu">
<li><a href="http://wnmufm.org/livestream">PR90 Live Stream</a></li>
<li><a href="http://wnmufm.org/sportsstream">NMU Sports Stream</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/.jukebox?action=programs">PR90 Podcasts</a></li>
<li><a href="http://wnmufm.org/nprpodcasts">NPR Podcasts</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/support">Support Us</a>
<ul class="menu">
<li><a href="https://secure.publicbroadcasting.net/wnmu/default/form.pledgemain">Make A Pledge</a></li>
<li><a href="http://secure.publicbroadcasting.net/wnmu/default/viewpremiums.pledgemain?newSearch=true&premiumType=all&orderBy=amount">Thank You Gifts</a></li>
<li><a href="http://wnmufm.org/matchinggifts">Matching Gifts</a></li>
<li><a href="http://wnmufm.org/underwriter">Become An Underwriter</a></li>
<li><a href="http://wnmufm.org/support">Ways to Give</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/insidepr90">Inside PR90</a>
<ul class="menu">
<li><a href="http://wnmufm.org/evelyn">Manager's Message</a></li>
<li><a href="http://wnmufm.org/history">Station History</a></li>
<li><a href="http://wnmufm.org/staff">PR90 Staff</a></li>
<li><a href="http://wnmufm.org/employment">Job Openings</a></li>
<li><a href="http://wnmufm.org/contact">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
这是菜单 CSS：
#nav
{
width:974px;
min-height:33px;
background:#d5c6a6 url(http://wnmufm.org/wp-content/themes/cover-wp/images/menu.png);
text-align:bottom;
}
ul#menu, .menu ul
{
padding:0;
list-style-type:none;
font-family:Georgia, "URW Bookman L", serif;
font-size:14px;
padding-right:285px;
margin:0;
}
ul#menu li, .menu ul li
{
float:left;
padding:0 5px;
margin:7px 0;
border-right:#333333 1px dotted;
margin-left:0;
}
ul#menu li a:link, ul#menu li a:visited, .menu ul li a:link, .menu ul li a:visited
{
display:block;
text-align:center;
padding:0 15px;
text-decoration:none;
color:#333333;
}
ul#menu li a:hover, ul#menu li a:active, .menu ul li a:hover, .menu ul li a:active, ul#menu li.current_page_item a, .menu ul li.current_page_item a:link, .menu ul li.current_page_item a:visited, .menu ul li.current_page_item a:hover, .menu ul .current_page_item a:active
{
background-color:#ffffff;
text-decoration:none;
color:#cc3300;
}
ul#menu li li
{
border-right:none;
margin:0;
margin-top:0px;
min-width:120px;
padding:0;
float:none;
}
ul#menu li li li
{
padding-left:1px;
}
ul#menu li li a, ul#menu li li a:link, ul#menu li li a:visited
{
background:#d5c6a6 url(http://wnmufm.org/wp-content/themes/cover-wp/images/submenu.png) bottom;
min-width:120px;
color:#333333;
font-size:14px;
font-family:Georgia, "URW Bookman L", serif;
margin:0;
line-height:25px;
text-align:left;
}
ul#menu li li a:hover, ul#menu li li a:active
{
background:#FFFFFF;
color:#cc3300;
}
ul#menu li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
min-width:150px;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li ul a
{
min-width:120px;
}
ul#menu li ul ul
{
margin:-26px 0 0 150px;
}
ul#menu li:hover ul ul, ul#menu li:hover ul ul ul
{
left:-999em;
}
ul#menu li:hover ul, ul#menu li.sfhover ul, ul#menu li li:hover ul, ul#menu li li.sfhover ul, ul#menu li li li:hover ul, ul#menu li li li.sfhover ul
{
left: auto;
}
ul#menu li:hover, ul#menu li.sfhover
{
position: static;
}
感谢您的帮助。谢谢！
http://wnmu.publicbroadcasting.net/test.html
I am trying to get the menu here working. Works perfectly in Firefox and Chrome, but it won't work in Internet Explorer. I tried both IE8 and IE9 including Compatibility View and none of the drop downs show up at all.
Here's the HTML from the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?xml version="1.0"?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="http://wnmufm.org" target="_self"><img src="http://www.wnmufm.org/wp-content/uploads/2011/05/pr90-banner.jpg" border="0"></a><br>
<div id="nav">
<ul id="menu" class="menu">
<li><a href="http://wnmu.publicbroadcasting.net/index.html">Home</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain">News</a>
<ul class="menu">
<li><a href="http://events.publicbroadcasting.net/wnmu/events.eventsmain">Events Calendar</a></li>
<li><a href="http://wnmufm.org/category/news/">Regional News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain?action=section&SECTION_ID=2">National News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain?action=section&SECTION_ID=3">World News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/arts.artsmain">Arts News</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/news.newsmain?action=section&SECTION_ID=5">Business News</a></li>
<li><a href="http://wnmufm.org/schoolclosings/">School Closings</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/localprograms">Programming</a>
<ul class="menu">
<li><a href="http://wnmufm.org/localprograms">Local Programs</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/guide.guidemain">Program Guide</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/guide.guidemain?action=searchPlaylist&playlistID=0">Search Playlist</a></li>
<li><a href="http://wnmu.publicbroadcasting.net/media/Preview%20PDF/WNMU-FM_Preview_May11.pdf">Download May Preview</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/livestream">Listen to PR90</a>
<ul class="menu">
<li><a href="http://wnmufm.org/livestream">PR90 Live Stream</a></li>
<li><a href="http://wnmufm.org/sportsstream">NMU Sports Stream</a></li>
<li><a href="http://www.publicbroadcasting.net/wnmu/.jukebox?action=programs">PR90 Podcasts</a></li>
<li><a href="http://wnmufm.org/nprpodcasts">NPR Podcasts</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/support">Support Us</a>
<ul class="menu">
<li><a href="https://secure.publicbroadcasting.net/wnmu/default/form.pledgemain">Make A Pledge</a></li>
<li><a href="http://secure.publicbroadcasting.net/wnmu/default/viewpremiums.pledgemain?newSearch=true&premiumType=all&orderBy=amount">Thank You Gifts</a></li>
<li><a href="http://wnmufm.org/matchinggifts">Matching Gifts</a></li>
<li><a href="http://wnmufm.org/underwriter">Become An Underwriter</a></li>
<li><a href="http://wnmufm.org/support">Ways to Give</a></li>
</ul>
</li>
<li><a href="http://wnmufm.org/insidepr90">Inside PR90</a>
<ul class="menu">
<li><a href="http://wnmufm.org/evelyn">Manager's Message</a></li>
<li><a href="http://wnmufm.org/history">Station History</a></li>
<li><a href="http://wnmufm.org/staff">PR90 Staff</a></li>
<li><a href="http://wnmufm.org/employment">Job Openings</a></li>
<li><a href="http://wnmufm.org/contact">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
And here's the menu CSS:
#nav
{
width:974px;
min-height:33px;
background:#d5c6a6 url(http://wnmufm.org/wp-content/themes/cover-wp/images/menu.png);
text-align:bottom;
}
ul#menu, .menu ul
{
padding:0;
list-style-type:none;
font-family:Georgia, "URW Bookman L", serif;
font-size:14px;
padding-right:285px;
margin:0;
}
ul#menu li, .menu ul li
{
float:left;
padding:0 5px;
margin:7px 0;
border-right:#333333 1px dotted;
margin-left:0;
}
ul#menu li a:link, ul#menu li a:visited, .menu ul li a:link, .menu ul li a:visited
{
display:block;
text-align:center;
padding:0 15px;
text-decoration:none;
color:#333333;
}
ul#menu li a:hover, ul#menu li a:active, .menu ul li a:hover, .menu ul li a:active, ul#menu li.current_page_item a, .menu ul li.current_page_item a:link, .menu ul li.current_page_item a:visited, .menu ul li.current_page_item a:hover, .menu ul .current_page_item a:active
{
background-color:#ffffff;
text-decoration:none;
color:#cc3300;
}
ul#menu li li
{
border-right:none;
margin:0;
margin-top:0px;
min-width:120px;
padding:0;
float:none;
}
ul#menu li li li
{
padding-left:1px;
}
ul#menu li li a, ul#menu li li a:link, ul#menu li li a:visited
{
background:#d5c6a6 url(http://wnmufm.org/wp-content/themes/cover-wp/images/submenu.png) bottom;
min-width:120px;
color:#333333;
font-size:14px;
font-family:Georgia, "URW Bookman L", serif;
margin:0;
line-height:25px;
text-align:left;
}
ul#menu li li a:hover, ul#menu li li a:active
{
background:#FFFFFF;
color:#cc3300;
}
ul#menu li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
min-width:150px;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li ul a
{
min-width:120px;
}
ul#menu li ul ul
{
margin:-26px 0 0 150px;
}
ul#menu li:hover ul ul, ul#menu li:hover ul ul ul
{
left:-999em;
}
ul#menu li:hover ul, ul#menu li.sfhover ul, ul#menu li li:hover ul, ul#menu li li.sfhover ul, ul#menu li li li:hover ul, ul#menu li li li.sfhover ul
{
left: auto;
}
ul#menu li:hover, ul#menu li.sfhover
{
position: static;
}
I appreciate any help. Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的 HTML 包含一个杂散的
，它应该位于页面的非常顶部。在您提供的网址上，您有诸如Your HTML contains a stray
<?xml version="1.0"?>, which should be at the very top of the page. On the URL that you gave, you have elements such as<pi_page_head>and<pi_page_foot>that do not exist, and you don't have a doctype, so your document renders as quirks mode.我没有看到你的 css 样式表连接在哪里示例 link ="style.css" rel="stylesheet" type="text/css">
如果 HTML 页面上有 css 样式，它应该位于打开和关闭样式标记之间。
我试图为您编写第一个示例的代码，但由于某种原因，它删除了超链接。在单词 link a < 之前在链接之后有一个空格和href以及其他所有内容=“style.css”，您就会知道您的css已附加到您的html页面。是的，我刚刚去了一个模板网站，你的 css 页面必须附加<链接 href="style.css" rel="stylesheet"type=" type="text/css">
I don't see where your css stylesheet is connected example link ="style.css" rel="stylesheet" type="text/css">
and If you had your css style on your HTML page it should be in between open and close style tags.
I tried to write the code out for you about the first example, for some reason it blank the hyperlink out. before the word link a < is there and after link then a space and href and everything else ="style.css" you would know your css was attached to your html page. Yes I just went to a Template site your css page got to be attached < link href="style.css" rel="stylesheet"type=" type="text/css">