html - CSS 下拉菜单无法在悬停事件后保持不变

Question

我目前正在处理以下页面上的几个下拉菜单: http://icao.tungsten.hireserve-test.com/home.html

最初，我们只有这些菜单之一，但我们的客户后来更改了他们的模板，我们现在需要实现两个下拉菜单。以前这是通过触发 show() 和 hide() 的 jQuery hover() 事件完成的，但现在我已将其替换为 CSS。

li.dynamic-children{
    position: relative
}

li.dynamic-children ul{
    display: none;
    position: absolute;
}

li.dynamic-children:hover ul{
    display: block;
    left: -1px;
    top: 18px;
    position: absolute;
    z-index: 100
}

li.dynamic-children:hover ul span{
    width: 100%
}

下拉菜单在悬停时成功显示，但是因为它是用 CSS 完成的，所以似乎没有任何方法可以确保当用户离开触发下拉菜单的链接时下拉菜单仍然存在。这意味着用户无法选择下拉菜单中的任何元素，使其变得无用。

对于如何强制菜单持续足够长的时间以便用户能够为下拉菜单进行选择，你们有什么想法吗？

编辑:

基于下面提供的一些代码，我现在包含了以下 CSS 规则:

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border-top:4px solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 1000 !important;
}


.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static {
    float: left;
    padding-bottom: 5px;
}

这些规则导致菜单保留，但在 IE7 中，下拉菜单现在落后于页面上的其他元素，呈现它在此浏览器中仍然无用。我尝试了很多 z-index 修复都无济于事。

Answer 1

试试这个，

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border: 0 solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 101;
}



 li.dynamic-children:hover ul {
    display: block;
    left: -1px;
    position: absolute;
    top: 22px;
}