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

以下适用于我。

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

查看下面的截图 enter image description here

适用于IE7。如果这仍然不适合你，你需要在jsfiddle.net上发布你的工作代码，所以我可以看看。

Answer 2

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

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

Live Demo（edit）

如果这不适用于您的实际页面，我会向您提出一个问题。

您在网页上使用了哪种doctype？（显示文件的第一行）

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

2 个答案: