Planning Your Gap Year Abroad
TRAVEL GUIDE
The hard truth about volunteering
About Design thinking. It has not yet been fully embraced by business leaders as a means to navigate the constant rate of change in today's climate. This process is an essential tool that will give entrepreneurs the edge that they need to succeed.

Как создать классическое выпадающее меню для десктопной версии в 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