상단메뉴만들기^^

• 메뉴1
• 메뉴2
• 메뉴3

• 서브1
• 서브2
• 서브3
• 서브4

• 서브1
• 서브2
• 서브3
• 서브4

• 서브1
• 서브2
• 서브3
• 서브4

 

 

<!--script-->
<script type="text/javascript">
$(document).ready(function(e) {
 $(".menu_sub").hide();
 $("#<?=$mainMenu?>_sub").show();

 //1차 메뉴 오버시 서브메뉴 보이게 하고, 아웃시 사라지게 하기.
 $("#top_menu > li").css("cursor","pointer");
 $("#top_menu > li").hover(
 
  function() {
   $(".menu_sub").hide();
   var main_id = $(this).attr("id");
   $("#"+main_id+"_sub").show();
  },
  function() {
   var main_id = $(this).attr("id");
   $("#"+main_id+"_sub").hover(
    function() { //서브에 오버 되었을 경우 그대로 둠.
    },
    function() {
     $(".menu_sub").hide();
     //$("#<?=$mainMenu?>_sub").show(); //마우스 아웃시 지정된메뉴표시시
     $("#"+main_id+"_sub").show();  //마우스 아웃시 마지막 오버된 메뉴 표시
    }
   );
  }
 );
});
//
</script>

<style>
    #top_menu{float:left; }
   .menu_sub{position:absolute; width:748px; top:60px; list-style:none;}
   .menu_sub li{float:left; padding-left:16px; padding-top:24px;}
   .menu_sub li a{text-decoration: none; color:#fff; font-size:13px;}
   .menu_sub li a:hover{text-decoration: none; color:#ffff00; font-size:13px;}
   .menu_sub li a:active { text-decoration: none; color: #ffff00; font-size:13px;}
   #menu1_sub{padding-left:75px;}
   #menu2_sub{padding-left:0;}
   #menu3_sub{padding-left:235px;}
   #menu4_sub{padding-left:85px;}
   #menu5_sub{padding-left:450px;}
</style>

<!--html-->
 <ul class="menu menu_align" id="top_menu">
  <li id="menu1"><a href="#">메뉴1</a></li>
  <li id="menu2"><a href="#">메뉴2</a></li>
  <li id="menu3"><a href="#">메뉴3</a></li>
 </ul>
 
 <ul class="menu_sub" id="menu1_sub">
  <li><a href="#">서브1</a></li>
  <li><a href="#">서브2</a></li>
  <li><a href="#">서브3</a></li>
  <li><a href="#">서브4</a></li>
 </ul>
 <ul class="menu_sub" id="menu2_sub">
  <li><a href="#">서브1</a></li>
 <li><a href="#">서브2</a></li>
 <li><a href="#">서브3</a></li>
 <li><a href="#">서브4</a></li>
</ul>
 <ul class="menu_sub" id="menu3_sub">
 <li><a href="#">서브1</a></li>
 <li><a href="#">서브2</a></li>
 <li><a href="#">서브3</a></li>
 <li><a href="#">서브4</a></li>
</ul>