Question

我有一个滑动菜单应该显示在图像上，实际上是一个徽标。然而，当它发生时，它被移动，好像菜单的文本想要避免触摸图像。

见：

the problem in image 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/

在图像上显示菜单

3 个答案: