CSS 드롭 다운 메뉴 너비 문제 및 투명 레이어 문제

Question

현재 다음 이미지와 같은 CSS 메뉴를 수행하려고합니다. 당신이 볼 수 있듯이

우리가 갤러리에 마우스를 가져 가면, 드롭 다운 메뉴가 등장해야하고 드롭 다운 메뉴 뒤에 등장한다 다른 투명 레이어가 있어야한다.

그러나 내가 이런 종류의 메뉴를 만들 때, 내가 달성 한 것은 다음 이미지와 같습니다. 두 메뉴를 비교

는

, 내가 직면하고 두 가지 문제입니다.

1. 드롭 다운 메뉴 너비. (나는 첫 번째 사진 처럼 드롭 다운 메뉴 너비를 갖고 싶습니다.하지만 ul의 너비를 설정하려고하면 다음 이미지와 같은 이 있습니다.)

   당신이 볼 수 있듯이 은, 폭은 변경하지만, 드롭 다운 상자가 에서 갤러리의 중심에 있어야하지만 내가처럼 투명 레이어를 추가하는 방법을 모르는

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/