npinex's questions

const newsItems = document.querySelectorAll('.news-item');
const updNewsItems = document.querySelector('.upd-news-items');
for (let i = 0; i < newsItems.length; i++) {
  let date = newsItems[i].querySelector('.date');

  if (date) {
    date = date.textContent.replace(/[^\.\d]/g, '');
    let newDate = date.slice(8, 10);
    date = date.slice(0, 5).replace(/\./g, ' / ') + ` / ${newDate}`;
  } else {
    date = '';
  }
  let newsItem = document.createElement('div');
  newsItem.classList.add('upd-news-item');
  newsItem.insertAdjacentHTML(
    'afterbegin',
    `
   <span class="upd-news-date">${date}</span>
   `
  );
  updNewsItems.append(newsItem);
}

.news-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid blue;
  width: 200px;
  margin: 0 0 20px 0;
}

.news-item {
  border-bottom: 1px solid blue;
}

.news-item:last-of-type {
  border: 0;
}

.upd-news-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid red;
  width: 200px;
  margin: 0 0 20px 0;
}

.upd-news-item {
  border-bottom: 1px solid red;
}

.upd-news-item:last-of-type {
  border: 0;
}

<div class="news-items">
  <div class="news-item">
    <div class="date">25.05.2024</div>
  </div>
  <div class="news-item">
    <div class="date">26.05.2024</div>
  </div>
  <div class="news-item">
    <div class="date">27.05.2024</div>
  </div>
</div>
<div class="upd-news-items"></div>

let link = document.querySelector('.link');
let dropMenu = document.querySelector('.drop-menu');

link.addEventListener("mouseenter", function () {
  setTimeout(() => {
    dropMenu.classList.remove('dn');
  }, 500);
});

link.addEventListener("mouseleave", function () {
  dropMenu.classList.add('dn');
});

.wrapper {
  position: relative;
}

.drop-menu {
  position: absolute;
  width: 100%;
  max-width: 400px;
  background: blue;
  top: 60px;
}

.dn {
  display: none;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  max-width: 500px;
}

.menu a {
  padding: 10px
}

<div class="container">
  <div class="wrapper">
    <a href="/" class="link">Каталог</a>
      <div class="drop-menu dn">
             <ul>
             <li>Элемент 1</li>
             <li>Элемент 2</li>
             <li>Элемент 3</li>
           </ul>
      </div>
  </div>
   <div class="menu">
       <a href="/">О компании</a>
       <a href="/">Доставка</a>
       <a href="/">Контакты</a>
   </div>
</div>