javascript - 为什么这与 jQuery 不相符？

Question

我需要为客户快速添加一个弹出菜单。我不想弄乱 CSS 或 HTML，因为他们的样式没有 JS，完全按照他们想要的方式设置，他们只是想让我添加 JS。我只是认为设置内部 <ul> 会很简单绝对定位，然后顶部偏移量为父级 <li> 的顶部但它根本不起作用。甚至还没有接近。

$(function(){       
    $('#snav-links > li > ul').css({
        display:'none',
        position:'absolute',
        background:'#00182E',
        left:$('#snav-links').width()+'px'
    })
    .parent().hover(
        function(){
            $(this).find('ul').css({display:'block',top:$(this).offset().top+'px'})
        },
        function(){
            $(this).find('ul').css({display:'none'})
        }
    );
});

这是页面:http://www.nwcidisplays.com/_temp/

将鼠标悬停在左侧边栏菜单项“横幅支架”和“桁架显示器”上。你就会看到它有多糟糕。我不知道如何解决它。有想法吗？

Answer 1

给你带来麻烦的罪魁祸首是#snav-links > li中的 anchor 。它们是 float 的，不占用离元素内的空间。这将导致 li 元素具有最小高度，并且它们位于实际链接上方。

删除 float 并将父级设置为相对定位，就是这样:http://jsfiddle.net/rEVwd/6/ .

您还必须调整 li 元素中的边距或填充，以便最终结果与之前相同。