0

我在我正在开发的网站中实现了一个 CSS 下拉菜单。它可以在除 IE 之外的任何浏览器中完美运行。

在 IE 中，下拉菜单将出现在页面的完全不同的区域，使得在悬停消失之前无法单击链接。我在下面包含了我的.css和.html（将导航结构更改为基本的）文件中的代码。此导航通过 PHP 包含放置到我的网站布局中，因此我的导航栏显示的区域居中，距离主页顶部 230 像素。

当我使用DOCTYPE严格模式时，它会按预期工作，但是我还有其他无法更改的问题，所以我宁愿不使用 a DOCTYPE（否则我将被迫重新编码整个网站）

我确信必须有某种解决方法...即使它在 IE 中的显示不完全相同，我只需要它可以使用！

任何帮助是极大的赞赏！！我花了好几个星期试图解决这个头痛...

CSS文件：

#catnav {
    padding: 0;
    clear: both;
    height: 32px;
    width: 980px;
    background: #000;
    position: absolute;
    top: 230px;
    z-index: 100;
}

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100;
}

#nav ul {
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

#nav a {
    display: block;
    line-height: 32px;
    margin: 0 0px;
    padding: 0;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

#nav li a:hover {
    color: #fff;
    text-decoration: underline;
    display: block; 

}

#nav li ul {
    list-style: none;
    position: absolute;
    width: 0px;
    left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li li {
    float: left;
    margin: 0;
    padding: 0;
    width: 120px;
}

#nav li li a {
    width: 129px;
    height: 24px;
    line-height: 24px;
    color: #000;
    border-bottom: 1px solid #000;
    background: #c5c5c5;
    margin: 0;
    padding: 5px 20px 5px 15px;
}

#nav li li a:hover {
    border-top: 1px solid #131f27;
    background: #8f7c58;
    padding: 5px 20px 5px 15px;
}

#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
    position: static;
}

文件：

<script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
        if (!document.getElementsByTagName) return false;
        var sfEls = document.getElementById("nav").getElementsByTagName("li");

        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }    
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

<link rel="stylesheet" href="css.css">

<div id="catnav">
    <div id="nav">    
        <ul>  
            <li><a href="#" title="Title 1">Title Link 1</a></li>
        </ul>
            <li><a href="#" title="Title Link 2"></a>
        <ul>  
            <li><a href="#" title="Title">Title Link2 </a></li>  
        </ul>  
        </li>  
            <li><a href="#" title="Title 3">Title Link 3</a>
        <ul>  
            <li><a href="#" title="Sub Link 1">Sub Link 1</a></li>  
        </ul>  
            </li>  
            <li><a href="#" title="Title 4">Title 4</a>
        <ul>  
            <li><a href="#" title="Title">Sub Link 1</a></li>  
        </ul>           
        </li>  
            <li><a href="#" title="Title 5">Title Link 5</a></li>  
            <li><a href="#" title="Title 6 ">Title Link 6</a></li>  
            <li><a href="#" title="Title 7">Title Link 7</a></li>  
        </ul>  
    </div>
</div>

我怎样才能使 IE 至少将这些下拉菜单显示在其标题下方而不是230px下方和右侧？

4

1 回答 1

0

听起来像是一个盒子模型问题，有很多线程和问题与 IE 如何在页面上呈现元素的实现有关。我简单地使用了您的代码片段并更改了以下 CSS 部分：

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    _margin-top: -230px;
    _margin-left: -72px;
}

仍然存在子链接未直接显示在父链接下的问题，我没有更多时间回复您的问题，但这应该给您一个起点。

这是2009 年的类似问题，回复中进行了很好的讨论。

于 2012-09-03T19:29:38.333 回答