【问题标题】:Drop down navigation menu not working in Internet Explorer下拉导航菜单在 Internet Explorer 中不起作用
【发布时间】:2013-09-23 16:20:51
【问题描述】:

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;
}

感谢您的帮助。谢谢!

【问题讨论】:

    标签: html css internet-explorer drop-down-menu


    【解决方案1】:

    您的 HTML 包含一个杂散的&lt;?xml version="1.0"?&gt;,它应该位于页面的非常顶部。在您提供的 URL 上,您有 &lt;pi_page_head&gt;&lt;pi_page_foot&gt; 等不存在的元素,并且您没有 doctype,因此您的文档呈现为 quirks 模式。

    【讨论】:

    • 我认为 pi_page_head 等元素是主机(公共交互)使用的代码,它抓取页眉、页脚和其他元素来构建页面。有点像 WordPress 的作品。我对使用 Public Interactive 的网站还是新手,他们用它来构建他们的网页,我还不确定所有的限制(即,如果有办法将 xml 版本放在页面的最顶部,等等...)。
    • 如果它们应该用于某种内容管理或模板系统,那么您使用它是错误的。这些标签将被浏览器忽略,您仍然需要修复 mc10 提到的问题。您有可能完全删除所有这些与 pi_ 相关的标签,一切仍然有效。
    【解决方案2】:

    我没有看到你的 css 样式表在哪里连接示例链接 ="style.css" rel="stylesheet" type="text/css">

    如果你的 HTML 页面上有你的 css 样式,它应该在打开和关闭样式标签之间。 我试着为你写出关于第一个例子的代码,由于某种原因它使超链接空白。在链接之前有一个

    【讨论】:

      猜你喜欢
      • 2019-10-20
      • 1970-01-01
      • 2017-05-19
      • 1970-01-01
      • 2013-01-12
      • 2014-08-22
      • 2012-01-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多