IE7 下拉菜单问题答案

【问题标题】：IE7 Dropdown Menu IssueIE7 下拉菜单问题
【发布时间】：2011-02-15 23:07:49
【问题描述】：

我有一个下拉菜单设置。在 Firefox / IE8 等中工作正常。但在 IE7 中不行，理想情况下我想让它工作。当我在 IE7 中将鼠标悬停在菜单上时，菜单消失。我试着玩弄高度，但没有快乐。

我的代码如下...

CSS..

#topNav ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#topNav ul, topnav ul ul {
    display:block;
    margin:0;
    padding:0;
}
#topNav ul li {
    display:inline;
    float:left;
    padding:35px 24px;
    list-style:none outside none;
    position:relative;
}
#topNav ul li ul {
    color:#000000;
    display:block;
    position:absolute;
    top: 68px;
    visibility:hidden;
    width:180px;
    z-index:1000;
    height: 200px;
}
#topNav ul .home a, #topNav ul .coffeetable a, #topNav .coffeetable a, #topNav .audio a, #topNav .graphic a {
    color:#ff9966;
}

#topNav ul .photography a, #topNav ul .video  a, #topNav ul .web a, #topNav ul .contact a {
    color: #fff;
}

#topNav ul li ul li {
    color:#FF7E00;
    display:block;
    margin:0 0 5px;
    padding:15px;
    width: 240px;
}

#topNav ul li ul li a {
    color:#000000;
    display:block;
    margin:0;
    padding:5px;
}

#topNav ul li.submenu:hover ul {
    left:0;
    visibility:visible;
}

#topNav ul li.submenu:hover ul li {
    background-color: #000;
    margin:0;
    padding: 10px 10px;
}

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Picturebook Studio Ltd.</title>
<!--[if IE]>
<style type="text/css" media="screen">
body {behavior: url(includes/csshover.htc);} 

</style>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_400-Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('li');
    Cufon.replace('h1');
    Cufon.replace('p');
    Cufon.replace('ol li');
</script>
</head>

<body>
<?php include('includes/header.php'); ?>
<div id="logo">
    <img src="images/logo.png" alt="The Picturebook Studio Ltd" />
</div>

<div id="content">
    <h1>Welcome to the picturebook studio limited <br />
</h1>

    <p class="whiteParagraph">We employ a team of in house professionals which include:</p>
        <ol>
            <li>photographers</li>
            <li>videographers</li>
            <li>sound engineers</li>
            <li>graphic designers</li>
            <li>web designers</li>
        </ol>

   <p>We provide the following 'unique' services :</p>


</div>

</body>
</html>

包含的 NAV 文件....

<div id="topNav">
    <ul>
        <li class="home"><a href="#" title="Home">home</a></li>
        <li class="submenu photography">
            <a href="#" title="Photography">photography</a>
                <ul>
                    <li><a href="#" title="Actors / Presenters / Headshots">Actors / Presenters Headshots</a></li>
                    <li><a href="#" title="Model / Portfolio Shoots">Model / Portfolio Shoots</a></li>
                    <li><a href="#" title="People / Portraits">People / Portraits</a></li>
                    <li><a href="#" title="Wedings / Coffee Table Books">Weddings / Coffee Table Books</a></li>
                    <li><a href="#" title="Editorial / Commercial">Editorial / Commercial</a></li>
                </ul>
        </li>
        <li class="coffeetable"><a href="#" title="coffee table books">coffee table books</a></li>
        <li class="submenu video">
            <a href="#" title="video production">video production</a>
                <ul>
                    <li><a href="#" title="Actors / Presenters Showreels">Actors / Presenters Showreels</a></li>
                    <li><a href="#" title="Corporate">Corporate</a></li>
                    <li><a href="#" title="Industrial">Industrial</a></li>
                    <li><a href="#" title="Training Education">Training Education</a></li>
                    <li><a href="#" title="Weddings">Weddings</a></li>
                </ul>                    
        </li>
        <li class="submenu audio">
            <a href="#" title="audio production">audio production</a>
                <ul>
                    <li><a href="#" title="Voice Over">Voice Over</a></li>
                    <li><a href="#" title="Music Production">Music Production</a></li>
                </ul>
        </li>
        <li class="web"><a href="#" title="web design">web design</a></li>
        <li class="submenu graphic">
            <a href="#" title="graphic design">graphic design</a>
                <ul>
                    <li><a href="#" title="PR">PR</a></li>
                    <li><a href="#" title="Logo Design">Logo Design</a></li>
                </ul>
        </li>
        <li class="contact"><a href="#" title="contact us">contact us</a></li>
    </ul>
</div>

我该如何解决这个问题，以使悬停不会中断？在此先感谢各位。

【问题讨论】：

把它扔在这里：webdevout.net/test?0n 在 IE7/8/9/Chrome/FF 中的行为似乎相同，不确定如何继续。
您能粘贴完整的 HTML 文件吗？
@Aren 很有趣，似乎会打开，但是当你将鼠标悬停在它上面时，它肯定会使链接在消失时无法点击。
个人 id 在一些 javascript (jQuery?) 帮助下完成此操作。比依赖浏览器遵守 CSS 标准更轻松。
@StuBlackett：我讨厌听起来乏味，但您提供的代码仍然无法重现 IE7 中的错误。 Here's everything you've given so far rolled into one file - 它在 IE7 和 IE8 中的行为相同。 我想你能做的最简单的事情就是发布一个指向你的实时测试站点的链接。 否则，你需要确保你发布的代码能够重现 IE7 中的错误。再说一次，很抱歉听起来很乏味，但是如果没有有效的测试用例，就需要比我更聪明的人来解决这个问题。 :) （我从你的 HTML 中删除了一些元素，因为它们没有 CSS）

标签： css xhtml internet-explorer-7

【解决方案1】：

如果是这种情况...我只能建议仔细检查以确保您的浏览器和文档模式绝对处于 IE7 模式，请阅读有关 IE7 Z-index 方法的信息。试错 css 位置类型，我相信 IE7 与 css 显示类型（隐藏）有关。

清理你的 CSS，我知道每个人都会喜欢“什么”，但有时当你删除错误时你会发现很好的修复，因为某些浏览器对选择器周围的空格、逗号等内容更加敏感和严格。

如果所有这些都不起作用并且您扩展网络以寻找解决方案，但您什么也找不到。只需做一个 IE7 重定向（你可以在没有 JS 的情况下做到这一点），IE7 不值得压力，除非你的客户和客户客户是 IE7 的频繁用户，例如不想升级的小公司。

希望有帮助

（对不起，我只看了你的代码 2 秒）

【讨论】：

这真的不是一个有用的答案。并没有真正解决问题，只是提供一般性建议。
是的，这是一般建议，它会更有益。你不能只用一个直接的答案来解决每一个问题，有时你需要反复试验。