Question

我在页面左上角有一个语言下拉列表。问题是，当鼠标悬停在此边缘上时，菜单会向上滑动。有人能告诉我如何避免这种影响吗？这是链接 - http://livedemo07682.prestatrend.com，这是代码：

//Block languages module
    $('#languages_switcher').hover(function() {
        $(this).find('#languages_block_top span').addClass('hover');
        $(this).find('#first-languages').stop(true, true).slideDown(300);
    }, function() {
        $(this).find('#languages_block_top span').removeClass('hover');
        $(this).find('#first-languages').stop(true, true).slideUp(150);
    });

Answer 1

#first-languages_wrapper {
    /* top: 1em Remove this line */
    bottom: 4px; /* Add this one */
}

修改

这种情况正在发生，因为边距区域位于#languages_switcher边界之外。你有两个选择。

将top: 1em放入padding-bottom: 1em。

，而不是菜单中的#languages_switcher。

删除top: 1em并将其替换为border-top: 1em solid transparent

Answer 2

为元素添加填充

#languages_switcher {
  float: left;
  margin-left: -1px;
  padding-bottom: 1em;
}

Answer 3

阅读您的评论我认为您确实希望从您的语言切换器和您的下拉菜单中删除1em，虽然我看不清楚原因，它看起来未经修饰且与其他导航栏不一致但是这里是一个固定。

不要使用top:1em删除子菜单，只需将其放在一些填充顶部，这样就可以沿着轴向下拉伸容器，边距下降不会影响悬停事件;

<强> CSS

#first-languages_wrapper {
   padding-top:1em;
}

虽然我建议你放弃它top:100%，但看起来更清洁。

下拉利润率

3 个答案: