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;
}

Answer 2

两者之一：

• 选项 1（第 2840 行）

。 .s4-tn li.static > .menu-item {

color: #3b4f65;

white-space: nowrap;

border: 1px solid transparent;

padding: 4px 10px;

display: inline-block;

height: 34px;

vertical-align: middle;

}

• 选项 2（第 99 行）

  .s4-tn .horizontal ul.dynamic {

margin: 0 0 0 0;

border: 0px #003D78 solid;

width: 255px;

background-color: #ecf4fc;

}