Question

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

最初，我们只有其中一个菜单，但我们的客户已经改变了他们的模板，我们现在需要实现两个下拉菜单。以前这是通过jQuery hover（）事件完成的，这些事件触发了show（）和hide（），但现在我用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;

}

CSS下拉菜单无法在悬停活动后保留

2 个答案: