마우스 오버시 서브메뉴 디스플레이 하기

js

function show(id) {
  var div = document.getElementById(id);
  var submenu = document.getElementsByClassName('divSubMenu')
  for (var i = 0; i < submenu.length; i++) {
    submenu[i].style.visibility = "hidden"
  }
  div.style.visibility = "visible"
}

css

#divTopMenu{
  left:20px; 
  top:29px; 
  visibility: visible; 
  width: 0px; 
  position: relative;
}

.divSubMenu {
  left:0px; 
  top:0px; 
  visibility: hidden; 
  width: 890px; 
  position: absolute;
}

html

 <div>
    <span onmouseover="show('sub1')">카테고리1</span> | 
    <span onmouseover="show('sub2')">카테고리 2</span> 
  </div>
  <div id="divTopMenu"> 
    <div id="sub1" class="divSubMenu"> 
      <font color="#3c6aa2" size="1">▶  </font>  
      <a href="#" class="top02">menu 1-1 </a>  |  
      <a href="#" class="top02">menu 1-2 </a> |  
      <a href="#" class="top02">menu 1-3 </a>
    </div>
    <div id="sub2" class="divSubMenu"> 
      <font color="#3c6aa2" size="1">▶  </font> 
      <a href="#" class="top02">menu 2-1 </a>  |  
      <a href="#" class="top02">menu 2-2 </a> |  
      <a href="#" class="top02">menu 2-3 </a>  | 
      <a href="#" class="top02">menu 2-4 </a> 
    </div>

  </div>

See the Pen 2중 레이어 by younghyeong ryu (@wangta69) on CodePen.