Помощь со стилями

(c) chatgpt

HTML:

<nav>
  <ul>
    <li><a href="#">1</a>
      <div class="dropdown">
        <p>Текст для пункта меню 1</p>
      </div>
    </li>
    <li><a href="#">2</a>
      <div class="dropdown">
        <p>Текст для пункта меню 2</p>
      </div>
    </li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a>
      <div class="dropdown">
        <p>Текст для пункта меню 5</p>
      </div>
    </li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

nav .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  display: none;
}

nav .dropdown p {
  margin: 0;
  padding: 10px;
}

nav li:hover .dropdown {
  display: block;
}

JavaScript:

const dropdowns = document.querySelectorAll('.dropdown');

document.addEventListener('click', function(event) {
  const target = event.target;

  // скрываем все выпадающие меню
  dropdowns.forEach(function(dropdown) {
    dropdown.style.display = 'none';
  });

  // если кликнули на ссылку в меню, показываем его текст
  if (target.tagName === 'A' && target.nextElementSibling) {
    target.nextElementSibling.style.display = 'block';
  }
});

Со стилями то понял и штмль, а вот скрипт куда вписать?(

Добрый совет: никогда так не пиши.