0

我正在尝试为整个锚元素创建悬停效果，但它不起作用，一旦鼠标离开文本，下拉菜单就会消失：

这里是测试站点。

CSS：

.menu{}
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;}
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;}
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;}
ul.sub_navigation , .sub_navigation
{
    position: absolute;
    display: none;
    z-index: 100;
    background-image: url('/images/menu-bg-png.png');
    background-repeat:repeat-y;
    padding:10px 0px 10px 28px;

 }

我在哪里弄错了？

4

4 回答 4

3

CSS（添加）：

.menu li a {
    position: relative;
    z-index: 5;
}
于 2013-01-08T12:05:22.987 回答
1

在您的情况下，是因为 div 与 div#slider-container重叠#header。我看到这#slider-container是绝对的。

  1. 在这种情况下，您可以在属性上添加额外的 20 - 30pxTOP并去掉 padding-top。

  2. 另一件事就是在div上添加position:relative和z-index:10（例如）#header

于 2013-01-08T12:14:15.463 回答
0

锚元素具有文本的大小，仅此而已。链接和链接之间的空间是 li 的右边距。

消除

li {margin_right: 40px}

并设置

a {padding_right: 40px}
于 2013-01-08T12:05:02.187 回答
0

尝试这个：

.menu > li:hover .sub_navigation {
    display: block;
}
于 2013-01-08T12:06:19.120 回答