해당기능이 있는 다른 레이아웃을 참고해보시는게 도움이 되실껍니다.

레이아웃내 메뉴바의 구조도 바꿔야되고, js, css파일도 변경하셔야되고 몇줄의 댓글로 설명이 불가능 하겟네요.

가로로 출력되는 레이아웃들의 예로는 Xdom이 있습니다 해당 레이아웃을 참고해보세요.

ul li를 float: 스타일을 주어 가로로 정렬하면 됩니다.

간단하게 css와 출력부 자바스크립트 부분만 조금 조절해 주신다면 충분히 가능할 듯 싶네요.

이런 식으로 출력되게 됩니다.

<div ->

<ul loop ->

<li ->

</li ->

...하략

아마 세로로 출력될겁니다. 이부분에서 li클라스나 아이디에 float:left; margin-right:5px; 같은 값을 주게 되면 됩니다.

단 올려주신 캡쳐 이미지를 보아 기본 레이아웃을 수정하고 계신 듯 한데, 아마 모든 메뉴가 가로로 출력될 거에요.

그것에 대해 각각 출력하도록 자바스크립트를 수정하셔야 할 거에요.

jquery(function($)

{

$("#menunumX").mouseover(function(){$("$chlidMenu").css("display","block") ...하략

같은것으로 하시면 될 듯 싶습니다. 꼭 성공하시길!

http://api.jquery.com/?s=mouseover

잘 모르시겠으면, jquery 레퍼런스에서 찾아보시면 나올거에요.