메뉴 롤오버 showHide 적용하기

메인메뉴에 마우스를 올리면 2차 메뉴인 서브메뉴가 뜨도록 하는 메뉴를 만들고 싶었습니다.
꽤 오랫동안 어떻게 하는지를 몰라 헤매다가 방학을 맞이해서 해봐야지 하던게 벌써 한 두달이나 지나가버렸네요.

그러다가 1월이 다 가기 전에 홈페이지를 완성해놓고 2월엔 운동해야지 하는 생각에 설이 오기 전에 showHide 스크립트를 찾아헤매면서 내가 만들고자 하는 곳에 적당한 소스를 찾아보았습니다.

이 코드에 정확한 이름도 몰랐는데 신의키스님 홈페이지에 갔더니 Show-Hide Layers라는 이름으로 코드가 올라와있더군요.
그런데 소스를 보니 XE의 메뉴에 사용할만큼 확장성이나 용의성에 떨어지는 것 같아 새로운 코드를 찾아 헤매다가 여러가지 소스를 찾았지요.

롤오버 메뉴라 하기도 하고 스크립트 사이트의 모든 메뉴를 클릭하면서 찾았는데,
http://www.webmadang.net/javascript/javascript.do?action=read&boardid=8001&categoryid=1005&page=1&seq=356
이게 가장 나아보이더군요.

사실 예전에 이걸로 만들다가 그 땐 CSS에 대해 잘 모를 때라 실패하기도 했는데 이번에는 잘 할 수 있겠더군요.

그러나 소스를 찾고서도 이걸 적용하면 될까 하는 마음에 몇 개 다른 소스를 가지고 삽질도 해봤으나
이게 가장 내가 하는 메뉴 방법에 적당할 것 같더군요.

그래서 작업을 시작했습니다.

원래 XE에 맞는 코드가 아니라 XE에 맞게 수정하느라 약간 고생했는데 2차

아 그리고 소마세월님의 2차 메뉴는 약간 오류가 있는 것 같아 하다가 포기했습니다.
http://jobdahan.net/?document_srl=573832
http://www.zeroboard.com/15977640

이를 수정한 버전도 있던데 그건 놔두고,
http://www.zeroboard.com/?mid=zbxe_user_tip&search_target=title&search_keyword=%EB%A9%94%EB%89%B4&document_srl=16904420

XE에서 보면 소마세월님 소스 외에 우야노님께서 알려주신 소스도 있는데 이걸 조금 참조했습니다.
http://www.zeroboard.com/?mid=zbxe_user_tip&search_target=title&search_keyword=%EB%A9%94%EB%89%B4&document_srl=16790587

메인메뉴까지는 웹마당 소스를 가지고 잘 했는데 서브메뉴에서 어떻게 하는지 몰라 우야노님 소스 보고 고쳤는데 지금은 잘 되네요.
그래서 이까지만 우선 작업해서 XE스킨 페이지에 작업한 파일을 올려놓았습니다.