CSSのドロップダウンメニューの幅の問題と透明なレイヤの問題

Question

現在、次の画像のようにCSSメニューを実行しようとしています。

あなたが見ることができるように、我々はギャラリーに置くと、ドロップダウンメニューが登場しなければならないし、そのドロップダウンメニューの後ろに、登場しなければならない別の透明層があるはずです。

しかし、私がそのようなメニューを作成するとき、私が達成したのは次のイメージのようなものです。 2つのメニューを比較

、私が直面していますは、2つの問題があります。

1. ドロップダウンメニューの幅。 （最初の写真は のようなドロップダウンメニューの幅を持っていますが、ulの幅を設定しようとすると、次の画像のように になります）。あなたが見ることができるように

   、幅が変更されますが、ドロップダウンボックスは でGALLERYの中心でなければなりませんが、それは私のような透明な層を追加する方法がわからない

2. ではありません1枚目の写真。 どうか教えてください。

これは私のコードです。

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

お時間をありがとうございました。

Answer 1

透明のために、背景をimgとして透過性を持つ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/