Question

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

Here是测试网站。

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

 }

我在哪里弄错了？

Answer 1

CSS（添加）：

.menu li a {
    position: relative;
    z-index: 5;
}

Answer 2

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

在这种情况下，您可以在TOP属性上添加额外的20 - 30px，并摆脱填充顶部。
要做的另一件事就是在position:relative div

z-index:10

#header

Answer 3

锚元素具有文本的大小而没有其他内容。链接和链接之间的空格是li的右边距。

除去

li {margin_right: 40px}

并设置

a {padding_right: 40px}

Answer 4

试试这个：

.menu > li:hover .sub_navigation {
    display: block;
}

悬停不适用于整个街区

4 个答案: