Как сделать так, чтобы класс item добавлялся при наведении на него, но убирался только при клике за пределами dropdown или наведении на другой item?

Для того чтобы добавить класс item при наведении на него и убрать его при клике за пределами dropdown или наведении на другой item, можно воспользоваться JavaScript событиями. 

Например, можно добавить обработчики событий mouseenter и mouseleave для элементов item. При наведении на item добавляется класс, а при уходе с элемента убирается. Для того чтобы убрать класс при клике за пределами dropdown или наведении на другой item, можно добавить обработчик события click для всего документа, который будет проверять, был ли клик сделан в пределах dropdown или за его пределами.

Пример кода:

```html
<div class="dropdown">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<script>
const dropdown = document.querySelector('.dropdown');
const items = dropdown.querySelectorAll('.item');

items.forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.classList.add('active');
  });

  item.addEventListener('mouseleave', () => {
    item.classList.remove('active');
  });

  document.addEventListener('click', (e) => {
    if (!dropdown.contains(e.target)) {
      items.forEach(item => {
        item.classList.remove('active');
      });
    }
  });
});
</script>

<style>
  .item.active {
    background-color: lightblue;
  }
</style>
```

Теперь при наведении на элемент item у него будет добавляться класс active, который можно стилизовать по своему усмотрению. А при клике за пределами dropdown или наведении на другой item, класс будет убираться. 

Чтобы сохранить файл на песочнице в CodeSandbox при использовании определенного макета интерфейса, необходимо просто нажать на кнопку "Save" или "Save As" в верхнем правом углу окна редактора. Далее можно указать название проекта и сохранить его.