помогите пж создать выпадающий список с использыванием свойств html и css

Question

[![такого плана список только 3 пункт не надо,а 4 выпадает на одно сабменю][1]][1]

[1]: https://i.stack.imgur.com/JDsTZ.png я не могу разобраться в том,как сделать их встроенными в фон

Answer 1

Приведу частичный пример и стиль произвольный все отступы и т.д. нужно менять под себя.

.menu {
  margin : 0px;
  height : 60px;
  width : 100%;
  text-align : center;
  position : absolute;
  top : 144px;
}
.menu li{
  width:100%;
  display: inline;
  list-style:none;
  margin: 0 15px;  
  padding-left: 5px; 
}
.submenu {
  background: rgb(3, 3, 112,0.1);
  position: absolute;
  left: 30%;
  top: 100%;
  z-index: 5;
  width: 180px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: .5s ease-in-out;
  text-align: left;
}
.topmenu > li:hover .submenu {
  opacity: 1;
  transform: scaleY(1);
}



      <div class="menu">                  
        <ul class="topmenu">
         <li><a href="#" class="submenu-link">ТЕКТС</a>
          <ul class="submenu">
            <li><a href='#'>ТекстПодменю</a><br></li>
            <li><a href='#'>ТекстПодменю</a><br></li>
            <li><a href='#'>ТекстПодменю</a><br></li>
            <li><a href='#'>ТекстПодменю</a><br></li>
            <li><a href='#'>ТекстПодменю</a><br></li>
          </ul>
          </li>
         <li><a href="#">Текст</a></li>
         <li><a href="#">Текст</a></li>
         <li><a href="#">Текст</a></li>
        </ul>
       </div>
     </div>

суть в том что ваше меню ляжет на картинку текстом. все что вам надо смотрите в css .menu Указываем позицию на экране(position) и при помощи left, right, top, button выравниваем свое меню. Спрашивайте если что-то непонятно. Пока не разобрался как тут правильно отвечать.

БЛОГ НА HUSL

помогите пж создать выпадающий список с использыванием свойств html и css

Ответы (1 шт):