当鼠标离开<li> </li>时,CSS下拉菜单消失

时间:2010-09-06 00:51:36

标签: css

我遇到的问题是我无法看到子菜单。当我将鼠标悬停在它显示的父<li>上时,然后当我向下移动以选择其中一个子菜单项时,它会消失。一旦焦点从父<li>

中丢失,就会发生这种情况

我无法在任何地方找到解决方案。

有人可以检查一下吗?

http://www.mymediaventure.com/about.php。它位于“定价”选项卡下。这太令人沮丧了。我看到的其他例子看起来似乎有效,我无法发现任何明显的差异会暗示为什么他们的工作而我的工作没有。

提前致谢。

9 个答案:

答案 0 :(得分:14)

问题出在styles.css,与#main_content h1标题元素重叠div#primary_navigation有关。您可以通过在导航元素上设置更高的z-index来修复它,就像我在下面的示例中所做的那样。

#wrapper #top #right div#primary_navigation
{
    position : relative;
    z-index: 2;
    font-size : 11pt;
    margin-top : 72px;

}

在CSS中更进一步:

#main_content h1
{
    position : relative;
    z-index: 1;
    top : -20px;
    font-weight : normal;
}

如果您想直观地看到问题,请为#main_content h1添加背景颜色,您会发现它几乎完全覆盖了标签。因此,当您将鼠标悬停在“定价”选项卡的顶部时,可以触发下拉菜单,但是当您向下移动到子项目时,鼠标会覆盖标题,菜单将消失。

答案 1 :(得分:0)

#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}

这是问题,请尝试删除位置:相对,或将其更改为其他内容,即:绝对

答案 2 :(得分:0)

我按照上一张海报的建议进行了修改。我将页面上所有项目(标题,菜单和内容)的所有相对定位更改为绝对,这解决了菜单问题。我必须更改菜单的所有三个项目才能在鼠标悬停时停止消失。

答案 3 :(得分:0)

我的解决方案是扩展父级的填充,以便可选择/悬停区域更大。

在我的情况下,我设置了类似:.nav a {padding:20px;}

答案 4 :(得分:0)

我有类似的问题,我找到了解决方案。现在我根本不熟悉编码,一些简单的Dreamweaver,但就是这样。我遇到了 tumblr主题这个问题,但这些解决方案都没有奏效。只有在将top: 25px;更改为top: 20px;后,下拉列表才会对我的网站有效。希望这有助于某人。

答案 5 :(得分:0)

我在<ul>上设置了一个保证金,我将其移除并放在包含div的{​​{1}}上。

无论如何,我设法从图像悬停效果,例子和示例代码dropdown menu from custom button image hover

获得一个下拉菜单

我希望这有助于某人

答案 6 :(得分:0)

我遇到了类似的问题:当鼠标指针悬停在显示adsense广告下方的下拉菜单的一部分时,下拉菜单消失了。将广告放在html页面中解决了这个问题。没有尝试其他解决方案。

答案 7 :(得分:0)

我也有这个问题。问题是主菜单结束的位置和下拉菜单开始的位置之间有一个空格,所以当将nouse向下移动到下拉选项时,它将通过背景区域,菜单将消失。

修复程序正在调整顶部position,如下所示(在我的情况下,从4.0到3.75em)

.main-navigation ul ul {
            position: absolute;
        top: 3.75em;

答案 8 :(得分:0)

当我尝试从主菜单移动到辅助菜单时,我遇到了与辅助悬停导航相同的问题。对我来说似乎有用的是将边距移动到主菜单中。我将以下行添加到我已经存在的ul li ul {margin-top:-.1em; }