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

Question

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

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

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

更改如下：

#sidebar ul.subnav {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 276px;
}

#sidebar ul.subnav li {
    position: relative;
}

#sidebar ul.subnav li ul {
    position: absolute;
    left: 275px;
    top: 0;
    display: none;
    width: 276px;
    height: 58px;
    z-index: 300;
}

#sidebar ul.subnav li a {
    display: block;
    text-decoration: none;
    color: #444444;
    height: 58px;
    line-height: 58px;
    text-indent: 35px;
    font-size: 14px;
    z-index: 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; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

这是 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 如下：

#content {
    width: 641px;
    min-height: 300px;
    position: absolute;
    top: 0;
    left: 278px;
}

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

编辑#2：

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

Answer 1

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

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

现场演示（编辑）

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

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

Answer 2

以下内容对我有用。

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

检查下面的屏幕截图

适用于 IE7。如果这仍然不适合您，您需要将您的工作代码发布到 jsfiddle.net 中，以便我可以查看。