마우스 클릭하면 하위메뉴가 나오는데요!

현재 코딩이 저렇게 되있는데...

마우스 오버하면 하위메뉴가 나오고 마우스아웃 하면 없어지게 하고 싶은데...

어떻게 하면 될까요? 3시간 혼자 헤매다가 ㅜㅜ

글남깁니다.

고수님들 도와주세요~ ㅜㅜ

<ul class="lnb" id="tabmenu6">   
  <li><a href="#" onfocus="this.blur();">대메뉴1</a></li>
  <li><a href="#" onfocus="this.blur();">대메뉴2</a></li>

  <li><a href="#" onfocus="this.blur();">대메뉴3</a></li>
  <li><a href="#" onfocus="this.blur();">대메뉴4</a></li>

  <li><a href="#" onfocus="this.blur();">대메뉴5</a></li>
  <li><a href="#" onfocus="this.blur();">대메뉴6</a></li>
 </ul>

    <div class="tabcontent6>하위메뉴1</div>
    <div class="tabcontent6>하위메뉴2</div>

    <div class="tabcontent6>하위메뉴3</div>
    <div class="tabcontent6>하위메뉴4</div>

    <div class="tabcontent6>하위메뉴5</div>
    <div class="tabcontent6>하위메뉴6</div>

   
  
</div>

function tabMenu6() {
 var tabs = document.getElementById('tabmenu6');
 var tab = tabs.getElementsByTagName('a'); // 탭 요소
 var contents = document.getElementById('tabcontents6');
 var content = getElementsByClassName('tabcontent6',contents); // 컨텐츠 요소 class
 var chk = 'selected'; // 선택된 탭의 class
 var over = 'over'; // 롤오버된 탭의 class
 var type = true; // 롤오버의 true / false

 for (var i=0; i<tab.length; i++) {
  tabDisplay(tab,content,0,chk,over,true);
  tabAct(tab,content,i,chk,over,type);
 }
}