CSS下拉菜單寬度問題和透明層問題

Question

目前，我正在嘗試完成CSS菜單，如下圖所示。

如您所見，當我們將鼠標懸停在Gallery上時，應該會出現一個下拉菜單，並且在該下拉菜單的后面應該有另一個透明層出現。

但是，當我創建這種菜單時，我實現的效果如下圖所示。

比較兩個菜單，我面臨的是兩個問題。

1. 下拉菜單寬度。 （我希望下拉菜單的寬度像第一張照片一樣。但是當我嘗試設置ul的寬度時，就像下面的圖片一樣）。

   如您所見，寬度已更改，但下拉框應位於GALLERY的中心，但不是

2. 我不知道如何像第一張照片一樣添加透明層。 請指導我。

這是我的代碼。

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

非常感謝您的寶貴時間。

Answer 1

對於透明度，您可以使用RGBA或將具有透明度的1px png重復作為背景img。

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/