그 방법은 레이어를 메뉴에 걸치는 방법으로 해결해야 합니다. 마우스의 크기를 기준으로 마우스가 두개의 레이어에 걸치도록 가까이 위치시킨후 나타나는 레이어에도 마우스 오버 이벤트 발생시 자신을 계속나타나게 유지하고 또한 자신의 밖으로 마우스가 나갈때는 자신을 사라지게 만들어야 합니다.
자바스크립트는 소스만 베껴서 써서는 늘지 않습니다. 원리를 먼저 이해하여야 합니다.
먼저 html을 완벽하게 익힌후 다음으로 먼저 CSS를 정확히 이해한(공부한) 후에 자바스크립트를 익히셔야 합니다. DHTML의 출발은 자바스크립트 코드가 아니라 CSS가 기본입니다. 원리만 이해하시면 어떤 기능이든지 마음대로 구현할 수 있을 겁니다.

예제입니다.. 응용하세요..
<div style="border:solid 1 black;" onmouseover="menu4.style.visibility='visible'" onmouseout="menu4.style.visibility='hidden'"><center>DC PRECIOUS</center></div>
<DIV id=menu4 style="width:200;height:200;border:solid 3 black;position:absolute;left:expression((document.body.clientWidth-200)/2);top:32;visibility:hidden" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">4번내용</DIV>

님이 원하시는 것을 정확히 설명하셔야 알려드릴 수 있지요..
HTML의 계층구조, CSS속성 각 속성, JavaScript의 객체 개념을 이해하지 못하고는
DHTML은 일반 태그처럼 그냥 시행착오 몇번으로 습득되는 것이 아닙니다.

그럼 원하시는 http://www.ul.com의 메뉴 부분을 구현하는 원리만 간단히 설명 드리도록 하지요..
제가 젤 처음 드렸던 예제부분에서 수정하는 방법입니다.
onmouseout부분을 일단 삭제합니다. 그리고 하나의 메뉴에 마우스를 가져갔을 때 지정한 레이어가 보이게 합니다. 이때 동시에 그 레이어만 제외하고 모든 레이어는 감춤으로 설정하게 바꿉니다.

그리고 body부분으로 포커스가 이동되었을 때 모든 레이어를 감추는 스크립트를 추가합니다.
(마우스를 아무데나 클릭했을 때 모든 레이어가 안보여야 합니다.)
위 2가지가 기본 원리입니다. (소스를 안봐서 모르지만 이 2가지면 가능하리라 생각됩니다.)

그리고 급하게 생각하지 마시고 차근차근 하나하나 공부하는 것이 가장 빠른 방법입니다.
하루아침에 되는 것이 아니니 조금하게 생각하지 마시길..