-1

我有我在网上找到的悬停下拉导航栏的代码。当您将鼠标悬停在正文上时，它应该会下拉一个子菜单。

在 Chrome 和 FF 中它是完美的，但在 IE(8) 中它会将 ul 代码推到右侧，从而无法将光标移动到。

谢谢。

CSS：

#dropmenu,
#dropmenu ul {
list-style: none;
}
#dropmenu {
float: left;
width: auto;
}

#dropmenu li {
width: auto;
}

#dropmenu > li {
float: left;
width: auto;    
}
#dropmenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#dropmenu ul {
position: absolute;
display: none;
z-index: 999;
}
#dropmenu ul li a {
width: 80px;
}
#dropmenu li:hover ul {
display: block;
}

HTML：

<ul id="dropmenu">
<li><a href="#">Our Company</a>
<ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
<li><a href="#">Our Solutions</a>
<ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
<li><a href="#">Service Desk</a>
    <ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
    <li><a href="#">resources</a>
    <ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
<li><a href="#">Contact</a>
<ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>

4

1 回答 1

1

您缺少</ul>列表的结尾id="dropmenu"。这可能是个问题，Chrome 和 Firefox 更擅长帮助完成损坏的代码，而 IE 往往会损坏。

您不会结束包含整个菜单的菜单。在您的 html 的最后，您应该添加

</ul>
于 2013-07-12T16:01:53.250 回答