텍스트 메뉴 롤오버

 jQuery(document).ready(function(){
      // Main Menu
      $("li[id^=menu]").each(function(){
        $(this).bind('mouseover', function(){
          $("li[id^=menu]").each(function(){
            $(this).removeClass("selected");
          });
            $(this).addClass("selected");
        });
        $(this).bind('focusin', function(){
          $("li[id^=menu]").each(function(){
            $(this).removeClass("selected");
          });
            $(this).addClass("selected");
        });
        $(this).bind('focusout', function(){
           $(this).removeClass("selected");
        });
      });
   
      $("ul[class^=subMenu]").each(function(){    
        $(this).bind('mouseleave', function(){  
          $(this).parent().removeClass("selected");
        });   
      });

      $("div.mainNavi").bind('mouseleave', function(){  
        $("li[id^=menu]").removeClass("selected");
      });
  });


 <style type="text/css">
  .mainNav {position:relative; font-size:12px; border:1px #ccc solid; height:80px; width:650px; background:#f1f1f1;}
  .mainNav a {text-decoration:none; color:#333;}
  .mainNav li {float:left; margin-right:20px; padding:5px; list-style:none; line-height:16px; border:1px #ccc solid;}  
  .mainNav ul.subMenu {display:none; position: absolute; top: 42px; width: auto; z-index: 10;}
  .mainNav ul.subMenu li {display: inline-block; float: none;}
  .mainNav li.selected ul.subMenu {display:block;}

  #menu1 .ltPo {left:0;}
  #menu2 .ltPo {left:20px;}
  #menu3 .ltPo {left:40px;}
  #menu4 .ltPo {left:60px;}
  #menu5 .rtPo {right:0;}
 </style>

<div class="mainNav">
  <ul>
 <li id="menu1">
   <a href="#">대메뉴1</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
 </li>
 <li id="menu2">
   <a href="#">대메뉴2</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
 </li>
 <li id="menu3">
   <a href="#">대메뉴3</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
 </li>
 <li id="menu4">
   <a href="#">대메뉴4</a>
   <ul class="subMenu ltPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
 </li>
 <li id="menu5">
   <a href="#">대메뉴5</a>
   <ul class="subMenu rtPo">
  <li><a href="#">소메뉴1</a></li>
  <li><a href="#">소메뉴2</a></li>
  <li><a href="#">소메뉴3</a></li>
  <li><a href="#">소메뉴4</a></li>
  <li><a href="#">소메뉴5</a></li>
  <li><a href="#">소메뉴6</a></li>
  <li><a href="#">소메뉴7</a></li>
   </ul>
 </li>
  </ul>
</div>