드롭 다운 메뉴 구현

1. CSS

.menu {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;  
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 8px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn  { /* .dropbtn:focus */
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown-sub-content {
  position: absolute;
  width: 0px;
  height: 0px;
  z-index: 1;
}

.dropdown-sub {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  left : 115px;
  top : -37px;  
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-sub a {
  float: none;
  color: black;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-sub a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.center {
  display : block;
}

.right-arrow span {
  position: absolute;
}

.right-arrow span::after {
  content: '';
  width: 8px; 
  height: 8px; 
  border-top: 3px solid; 
  border-right: 3px solid; 
  background-color: #f9f9f9;
  display: inline-block;
  transform: rotate(45deg); 
  position: absolute;
  top: 14px; 
  left: 120px; 
}

2. JS

/* When the user clicks on the button, 
   toggle between hiding and showing the dropdown content */
function dropDownMain(topic) {
    var matches = document.querySelectorAll("div");
    matches.forEach(function (dropdownItem) {
        if (dropdownItem.classList.contains('show'))
            dropdownItem.classList.remove('show');
    });
    if(topic != "nomenu" && topic != null)
        document.getElementById(topic).classList.toggle("show");
}

function dropDownSub(topic) {
    var matches = document.querySelectorAll("div");
    matches.forEach(function (dropdownItem) {
        if(!dropdownItem.matches('.dropdown-content')) {
            if (dropdownItem.classList.contains('show'))
                dropdownItem.classList.remove('show');
        }
    });
    if(topic != "nomenu" && topic != null)
        document.getElementById(topic).classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function (e) {
    if (!e.target.matches('.dropbtn')) {
        var matches = document.querySelectorAll("div");
        matches.forEach(function (dropdownItem) {
            if (dropdownItem.classList.contains('show'))
                dropdownItem.classList.remove('show');
        });
    }
}

3. HTML

    <div class="menu">
        <div class="navbar">

            <a href="#" onmouseover="dropDownMain('nomenu')">Menu1</a>

            <div class="dropdown">
                <button class="dropbtn" onclick="dropDownMain('Menu2')" onmouseover="dropDownMain('Menu2')">Menu2</button>

                <div class="dropdown-content" id="Menu2">

                    <a href="#" onmouseover="dropDownSub('nomenu')">Sub1</a>

                    <div class="right-arrow">
                        <span></span>                
                    </div>
                    <a href="#" onclick="dropDownSub('Sub2')" onmouseover="dropDownSub('Sub2')">Sub2</a>
                    <div class="dropdown-sub-content">
                        <div class="dropdown-sub" id="Sub2">
                            <a href="#">Sub2-1</a>
                            <a href="#">Sub2-2</a>
                            <a href="#">Sub2-3</a>
                        </div>
                    </div>

                    <div class="right-arrow">
                        <span></span>                
                    </div>
                    <a href="#" onclick="dropDownSub('Sub3')" onmouseover="dropDownSub('Sub3')">Sub3</a>       
                    <div class="dropdown-sub-content">
                        <div class="dropdown-sub" id="Sub3">
                            <a href="#">Sub3-1</a>
                        </div>
                    </div>

                </div>

            </div>

            <div class="dropdown">
                ...
            </div>
            
            <div class="dropdown">
                ...
            </div>

        </div>
    </div>