아래 사진과 같은 GNB를 만들어야 합니다.

1. 마우스를 올릴 때 메뉴 스타일 변경하기 CSS의 :hover 선택자를 사용하여 메뉴에 마우스를 올렸을 때 스타일을 변경할 수 있습니다. 예를 들어, 다음과 같이 스타일을 지정할 수 있습니다. .menu-item:hover { color: red; text-decoration: underline; } 위 코드는 .menu-item 클래스를 가진 요소에 마우스를 올리면 텍스트 색상이 빨간색으로 변경되고, 밑줄이 생기도록 스타일을 지정한 것입니다. 2. 하위 메뉴 컨트롤하기 하위 메뉴를 컨트롤하기 위해서는 JavaScript를 사용해야 합니다. 예를 들어, 다음과 같은 방법으로 구현할 수 있습니다. 마우스를 올린 메뉴 아이템을 클릭하면 하위 메뉴를 표시합니다. 마우스를 올린 메뉴 아이템에 하위 메뉴가 표시되는 동안은 텍스트 색상과 밑줄을 유지합니다. 하위 메뉴가 닫히면 텍스트 색상과 밑줄을 원래대로 돌려 놓습니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#HTML:

<ul class="menu">
  <li class="menu-item" onclick="showSubMenu('sub-menu-1')">Menu 1</li>
  <ul class="sub-menu" id="sub-menu-1">
    <li>Sub-Menu Item 1</li>
    <li>Sub-Menu Item 2</li>
  </ul>
  <li class="menu-item" onclick="showSubMenu('sub-menu-2')">Menu 2</li>
  <ul class="sub-menu" id="sub-menu-2">
    <li>Sub-Menu Item 1</li>
    <li>Sub-Menu Item 2</li>
  </ul>
</ul>

#CSS:
.menu-item:hover,
.menu-item.active {
  color: red;
  text-decoration: underline;
}
.sub-menu {
  display: none;
}


#JavaScript:
function showSubMenu(subMenuId) {
  var subMenu = document.getElementById(subMenuId);
  if (subMenu.style.display === 'none') {
    sub