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

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

正如你所看到的，当我们悬停在画廊，下拉菜单应该出现，在下拉菜单后面，应该有另一个透明层出现

但是当我创建这种菜单时，我得到的结果就像下图

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

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

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

我不知道如何添加透明层，如第一张照片。 请告诉我怎么做

这是我的密码

JSFiddles：

---

非常感谢您的时间。

对于透明度，您可以使用RGBA或重复1px png，并将透明度作为背景img。

对于透明度，您可以使用RGBA或重复1px png，并将透明度作为背景img。

我已经对定位进行了修复，请尝试以下计算：

$(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();
                        });

---

我已经确定了定位，请尝试以下计算：

$(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();
                        });

---

您是否已经尝试过NOWRAP的宽度和不透明度/过滤器：alpha的透明度？您好，我想我的解释不是很清楚。关于透明度，我知道如何在CSS中做到这一点。我只是不知道如何将它作为另一个整体添加到下拉框后面我不太明白“如何将它作为另一个整体添加到下拉框后面”是什么意思-为什么您需要在下拉菜单后面添加另一个整体框？你能把img/text放进去吗？你好，elan，哦，我的意思是这样的。正如你在第一张照片中看到的，除了下拉框，后面还有一个透明背景的框，对吗？这就是我不知道怎么做的方框。问题的解决方案#1-您是否已经尝试过宽度和不透明度的RAP/过滤器：透明度的alpha？您好，我想我的解释不太清楚。关于透明度，我知道如何在CSS中做到这一点。我只是不知道如何将它作为另一个整体添加到下拉框后面我不太明白“如何将它作为另一个整体添加到下拉框后面”是什么意思-为什么您需要在下拉菜单后面添加另一个整体框？你能把img/text放进去吗？你好，elan，哦，我的意思是这样的。正如你在第一张照片中看到的，除了下拉框，后面还有一个透明背景的框，对吗？这就是我不知道怎么做的盒子。问题的解决方案#1-