CSS 水平悬停导航在 IE 7 中消失答案

【问题标题】：CSS Horizontal hover navigation disappearing in IE 7CSS 水平悬停导航在 IE 7 中消失
【发布时间】：2011-06-27 20:53:33
【问题描述】：

本质上，我一直在关注来自 A List Apart 的 Nick 的代码：

http://www.alistapart.com/articles/horizdropdowns/

我做了一些改动，主要是 - 我使用背景图像而不是背景颜色。一切都按预期工作，除了在 IE7 中，当试图将鼠标悬停在其中一个子项上时，悬停列表（右侧）会消失。

改动如下：

#sidebar ul.subnav { 边距：0；填充：0；列表样式：无；宽度：276px； } #sidebar ul.subnav li { 位置：相对； } #sidebar ul.subnav li ul { 位置：绝对；左：275px；顶部：0；显示：无；宽度：276px；高度：58px； z 指数：300； } #sidebar ul.subnav li a { 显示：块；文字装饰：无；颜色：#444444；高度：58px；行高：58px；文本缩进：35px；字体大小：14px； z 指数：300； } #sidebar ul.subnav li:hover ul { display: block; } #sidebar ul.subnav li.over ul { display: block; } #sidebar li.sub-item-1 { background: url('images/subnav-1.jpg') 0 no-repeat; } #sidebar li.sub-item-2 { background: url('images/subnav-2.jpg') 0 no-repeat; } #sidebar li.sub-item-3 { background: url('images/subnav-3.jpg') 0 no-repeat; } #sidebar li.sub-item-4 { background: url('images/subnav-4.jpg') 0 no-repeat; } #sidebar ul.subnav li.sub-item-1 ul li { background: url('images/rev-subnav-1.jpg') 0 no-repeat; } #sidebar ul.subnav li.sub-item-2 ul li { background: url('images/rev-subnav-2.jpg') 0 no-repeat; } #sidebar ul.subnav li.sub-item-3 ul li { background: url('images/rev-subnav-3.jpg') 0 no-repeat; } #sidebar ul.subnav li.sub-item-4 ul li { background: url('images/rev-subnav-4.jpg') 0 no-repeat; } /* 修复 IE。从 IE Mac 隐藏 \*/ * html ul li { 浮动：左； } * html ul li a { 高度：1%; } /* 结尾 */

这是 HTML，没有太大变化：

         <ul class="subnav"> 
            <li class="sub-item-1"><a href="#">Nav Item 1</a>
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
            <li class="sub-item-2"><a href="#">Nav Item 2</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
            <li class="sub-item-3"><a href="#">Nav Item 3</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li>
            <li class="sub-item-4"><a href="#">Nav Item 4</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
        </ul>

我尝试遵循此处其他主题中的一些建议，但似乎没有任何帮助。在这一点上，我可能遗漏了一些小事。有人有什么想法吗？

编辑：悬停导航所覆盖的内容区域导致了问题。

CSS如下：

＃内容 { 宽度：641px；最小高度：300px；位置：绝对；顶部：0；左：278px； }

如果我删除它，导航就可以正常工作。否则，我必须找到一种方法来设置该内容区域的样式。

编辑#2：

为此内容元素（位于下拉菜单后面）添加背景颜色可修复 IE7 中的问题。

【问题讨论】：

标签： css menu internet-explorer-7 background hover

【解决方案1】：

只需添加背景颜色即可在 IE7 中使用：

#sidebar ul.subnav li a {
    background: #fff
}

Live Demo (edit)

如果这在您的实际页面上不起作用，我有一个问题要问您。

您在页面上使用什么文档类型？（显示文件的第一行）

【讨论】：

使用 XHTML 1.0 过渡 - 背景声明覆盖正在使用的背景图像，我什至尝试添加并在那里声明它没有运气。
添加背景不起作用？ XHTML 是一种可接受的文档类型，因此与此无关。
即使用颜色覆盖我的背景图片，当试图导航到孩子时，悬停仍然会消失。
您的演示运行良好 - 一旦我们确定不是导航本身，我就设法找到了导致冲突的元素 - 我会在上面发布。
是的，现在一切正常。我想在某个时候发布更多代码布局，以更好地突出特定问题，但我怀疑我现在有时间。不过感谢您的帮助。

【解决方案2】：

以下对我有用。

background: url("http://www.kvammetravel.com/images/menu_background.gif") repeat-x scroll left top transparent;

查看下面的截图

在 IE7 中工作。如果这仍然对您不起作用，您需要在 jsfiddle.net 中发布您的工作代码，以便我查看。

【讨论】：