Planning Your Gap Year Abroad
TRAVEL GUIDE
The hard truth about volunteering

Как создать классическое выпадающее меню для десктопной версии в Tilda

Создадим классическое каскадное меню и ограничим видимость для экранов меньше 980px
Для мобильных версий создадим штатное меню ( на примере ME401)
1-код каркас меню
2- код визуальные настройки
Скрипт вставляем в блок ДРУГОЕ►T123

1
<nav role='navigation'>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас ¬</a>
      <ul>
        <li><a href="">Наша команда ¬</a>
        
          <ul>
            <li><a href="">Директор</a></li>
            <li><a href="">Мастера ¬</a>
              <ul>
                <li><a href="">Фарафонов</a></li>
                <li><a href="">Дягерев</a></li>
                <li><a href="">Сбруев</a></li>
                <li><a href="">Федоскин</a></li>
                <li><a href="">Баланин</a></li>
             </ul>
            </li>
            <li><a href="">Бухгалтер</a></li>
          </ul>
        </li>
        <li><a href="">Производство</a></li>
      </ul>
    </li>
    <li><a href="#">Контакты ¬</a>
       <ul>
        <li><a href="">Телефоны ¬</a>
         <ul>
          <li><a href="">8-812-433-56-57</a></li>
          <li><a href="">8-812-433-56-58</a></li>
          <li><a href="">8-812-433-56-59</a></li>
         
         </ul>       
         
        
        </li>
        <li><a href="">E-mail</a></li>
        <li><a href="">Telegram</a></li>
        <li><a href="">WhatsApp</a></li>
        <li><a href="">Viber</a></li>
        <li><a href="">Slack</a></li>
       </ul>      
    </li>
    
  </ul>
</nav>  

2
<style>
nav{
  position: fixed;
 /*Шрифт меню*/
  font-family: 'Lato', sans-serif;
  z-index:9999;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.1);
  padding-left:100px;
}
  nav ul{
    margin-bottom: 0px !important;  
    padding-left: 0px !important;
    list-style: none;
    position: relative;
    float: left;
    display: inline-table;
  }
    nav ul li{
      float: left;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
       
    nav ul li:hover{background: rgba(0,0,0,.15);}
    nav ul li:hover > ul{display: block;}
    nav ul li{
      float: left;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
      nav ul li a{
        display: block; 
        padding: 30px 10px;
        /*Цвет текста*/
        color: #222 !important; 
       /*Шрифт размер*/
        font-size: .9em;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;
      }  
      nav ul ul{
        display: none;
        width: max-content;
        background: #fff;
        position: absolute; 
        top: 100%;
        box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
        border: 1px solid rgba(0,0,0,.1);
      }
        nav ul ul li{float: none; position: relative;}
          nav ul ul li a {
            padding: 15px 30px; 
            border-bottom: 1px solid rgba(0,0,0,.05);
          }
          nav ul ul ul {
            position: absolute; 
            left: 100%; 
            top:0;
          }	       
</style>        
Made on
Tilda