죄송하지만 보배드림사이트의 네이게이션 메뉴는 플래쉬로 작성된것입니다..

 흠.. 그리고 액션스크립트 이용안하고 그냥 버튼의 롤오버와 롤아웃정도로만 해도.. 이 정도 네비게이션은 작성하실수 있을듯 하네요..

HTML코드로 작성하고자 한다면.. 흠...

1. 자바스크립트로 작성하는 방법이 있고

2. CSS마크업으로 작성하는 방법이 있습니다..

풀다운 메뉴에 대한 기법은 자바스크립트로 많이 나와있지만 가로형 기법은 그다지 많이 소개되어 있지는 않네요..

 CSS를 이용하는 방법은 좀 골때릴 정도로 머리 아픕니다..

문제는 각 브라우져간에 보여지는게 틀리기 때문이죠..ㅋ

저도 작성하다가.. IE6과 IE8,FF,Safari등..에서는 제대로 출력되는데

IE7에서 제대로 출력이 되지않아.. IE7에서는 아예 섭메뉴를 하단의 2차메뉴를 이용토록 하였습니다..

자바스크립트 네이게이션을 찾아보세요...

플래쉬로 작성하면, 뜸들이지 않고 약 3~4시간 정도면 작성하실수 있고요.. 위의 사이트  메뉴의 폰트는 1차는 윤고딕340 폰트와 2차는 굴림으로 보이네요.. 배너는 나눔인가? 맑은인가... 그정도군요..ㅋ  플래쉬 아니면 폰트부터 제약받아서 플래쉬 작성 추천요.. 

가로형 메뉴를 CSS로 작성하다가.. 도저히 브라우져간의 위치 차이문제 땜에 테이블로 잡아놓고 작업을 하였는데...

아쉽게도 IE7에서 잘 표현이 안되는 문제가 있네요... 완성시켜 쓰실려면 쓰세요..

 <table width="945" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width=147><a href="/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','image/logo_roll_over.gif',1)"><img src="image/logo.gif" alt="Daon Chemical International Root Site" name="Image2" width="166" height="37" border="0" id="Image2" /></a></td>
      
      <td rowspan="2" background="image/nav_back.jpg" width="779" height="77" valign="top">
      
      <!-- 네비게이션 : IE7의 문제점 -->
      <!-- 네이게이션 시작 -->
      <ul class="menu2">
 <li class="top"><a href="/about/" id="about" class="top_link"><span class="down"> About Daon Chemicals </span><!--[if gte IE 7]></a><![endif]-->
 
        <ul class="sub">
          <table valign=top><tr><td>
   <li><a href="/about/">CEO Message </a></li>
   </td><td>
            <li><a href="/about/over.html">Overview</a></li>
          </td></tr></table>
  </ul>
        <!--[if lte IE 6]></a><![endif]-->
 </li>
    
 <li class="top"><a href="/product/" id="products" class="top_link"><span class="down">Products & Services  </span><!--[if gte IE 7]></a><![endif]-->
 
        <ul class="sub">
          <table><tr><td valign="top" width="25%">
   <li><a href="/product/">BLINNO SERIES </a></li>
   </td><td valign="top" width="50%" id="pro">
            <li><a href="/product/faci.html">Facilities Service</a></li>
            </td><td valign="top" width="50%">
            <li><a href="/product/coating.html">Coating Service</a></li>
          </td></tr></table>
  </ul>
        <!--[if lte IE 6]></a><![endif]-->
 </li>
    
 <li class="top"><a href="/custom/" id="custom" class="top_link"><span class="down">Customer Support</span><!--[if gte IE 7]></a><![endif]-->
 
        <ul class="sub">
          <table valign=top><tr><td width="50%">
   <li><a href="/custom/">Visitor Guide</a></li>
   </td><td width="50%">
            <li><a href="/xe/?mid=inquiry&act=dispBoardWrite">Online Inquiry</a></li>
          </td></tr></table>
  </ul>
        <!--[if lte IE 6]></a><![endif]-->
 </li>
 
  <li class="top"><a href="/xe/english" id="community" class="top_link">Community</a></li>
 
      </ul>
<!-- 네이게이션 끝 -->
</td>
    </tr>
    <tr>
      <td background="image/logo_sita.gif" height="40">&nbsp;</td>
    </tr>
  </table>

  
#nav_menu { padding-top: 15px; margin-top: 0px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
.AKASmenubar { font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:5px; line-height:15px; color:#000; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:20px; padding-left: 20px; padding-right: 50px;}
.menu2 li a.top_link:hover { color:#FF6600; }

.menu2 li:hover > a.top_link { color:#FF6600; }

.menu2 table {border-collapse:separate;  height:0; position:absolute; top:0; left:0;}

/*  링크와 하버 스타일 정의 브라우져에 따라 달리 표기*/
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}
/* 스크린에 표시되는 서브 메뉴들. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {left:2px; top:20px; padding:3px 0; white-space:nowrap; width:150px; height:auto; font-weight:bold; padding-left: 20px;}
.menu2 :hover ul.sub { _width: 100px !important;}
.menu2 :hover ul.sub li {  display:block; height:20px; position:relative; float:left; margin-left: 10px;}
.menu2 :hover ul.sub li {  _width: 100px !important; _padding-top: 0px; _margin-top:0px; _margin-left: 0px !important;} 
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px;  line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover { color:#4E72D8; }
.menu2 :hover ul.sub li a.fly:hover {}
.menu2 :hover ul li:hover > a.fly {} 
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; white-space:nowrap; width:93px; z-index:200; height:auto;}

 적용되고 있는 사이트 http://www.daonchem.com 참조.. (몇년전에 만들어서 기억이 가물가물...)