Создайте раскрывающееся меню из трех точек в CSS с примерами кода

Чтобы создать раскрывающееся меню из трех точек в CSS, вы можете использовать различные методы. Вот несколько методов и примеры кода:

Метод 1: использование CSS Flexbox и псевдоэлементов
HTML:

<div class="dropdown">
  <div class="dots"></div>
  <ul class="dropdown-menu">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

CSS:

.dropdown {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.dots {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
  display: none;
}
.dropdown:hover .dropdown-menu {
  display: block;
}

Метод 2: использование CSS-сетки и флажка
HTML:

<div class="dropdown">
  <input type="checkbox" id="dropdown-checkbox" class="dropdown-checkbox">
  <label for="dropdown-checkbox" class="dots"></label>
  <ul class="dropdown-menu">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

CSS:

.dropdown {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  cursor: pointer;
}
.dots {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
}
.dropdown-menu {
  grid-column: 1 / -1;
  background-color: #fff;
  padding: 10px;
  display: none;
}
.dropdown-checkbox:checked ~ .dropdown-menu {
  display: block;
}

Метод 3. Использование CSS-позиционирования и JavaScript
HTML:

<div class="dropdown">
  <div class="dots"></div>
  <ul class="dropdown-menu">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

CSS:

.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.dots {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
  display: none;
}
.show-dropdown .dropdown-menu {
  display: block;
}

JavaScript:

var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function() {
  this.classList.toggle('show-dropdown');
});

Это всего лишь несколько примеров того, как можно создать раскрывающееся меню из трех точек в CSS. Вы можете настроить стили и функции в соответствии со своими требованиями.