javascript - 在图像上显示菜单

Question

我有一个应该显示在图像上的滑动菜单，实际上是一个徽标。但是，当它这样做时，它会被移动，好像菜单的文本想要避免接触图像。

看 ：

图片中的问题 http://fruityhotchocolate.com/m.png

（注：网站为法文）

我处理事件如下：

$("nav>#menu>ul>li").hover(function(e) {
    $("ul",this).css("display","block");
});

谢谢。

Answer 1

你不需要javascript，你可以用CSS来做：

添加以下代码：

#menu>ul>li>ul {
    display: none;
    list-style: none;
}
#menu>ul>li:hover>ul {
    display: block;
}

此外，您应该使用子选择器 ( >) 而不是后代选择器：

#menu>ul
#menu>ul>li>ul
#menu>ul>li>ul>li
#menu>ul>li>ul>li>a
#menu>ul>li>a, #menu>ul>li>a:hover, #menu>ul>li>a:visited

Answer 2

基本上，发生的情况是li扩展到与 相同的宽度，ul因为它没有固定的宽度。尝试：

$(document).ready(function() {
    $('#menu ul').children('li').each(function () {
        $(this).css('width', $(this).css('width'));
    });
});

Answer 3

用 CSS 试试：

<div class="content">
    <img src="https://www.google.com.br/images/srpr/logo3w.png​​​​​​​​​​" />
    <ul class="menu">
        <li>Item 1</li>
    </ul>
</div>

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​CSS：

.content {
    position: relative;
}

.content:hover .menu {
    display: block;
}

.menu {
    position: absolute;
    display: none;
}

演示：http: //jsfiddle.net/nfKc4/