CSS下拉菜单宽度问题和透明层问题

Question

目前我正在尝试完成CSS菜单，如下图所示。

正如您所看到的，当我们悬停到图库时，应该会出现下拉菜单，在该下拉菜单后面，应该会出现另一个透明图层。

但是当我创建这种菜单时，我所取得的成就如下图所示。

比较两个菜单，我面临的是两个问题。

1. 下拉菜单宽度。 （我想要下拉菜单宽度像 第一张照片。但是当我试图设置ul的宽度时，我得到了它 如下图）。

   如您所见，宽度已更改，但下拉框应为 画廊的中心，但它不是

2. 我不知道如何像第一张照片一样添加透明层。 请指导我如何做。

这是我的代码。

  

JSFiddles：http://jsfiddle.net/vZXvv/1/

非常感谢你的时间。

Answer 1

对于透明度，您可以使用RGBA或重复1px png，透明度为背景图片。

Answer 2

我已经找到了定位的方法，试试这个计算：

$(this).mouseenter(function() {
                            var leftPos = ($(this).find("ul").width() / 2) - ($(this).width() / 2);

                            $(this)
                                .find("ul")
                                .css({
                                    "left": -leftPos
                                })

                            $(this).find("ul").stop(true, true).slideDown();
                        });

http://jsfiddle.net/adaz/vZXvv/20/