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
1
Для мобильных версий создадим штатное меню ( в этом примере ME401)
2
Добавили код в блок другое Т123
1-код каркас меню (в нём задаются надписи и ссылки)
2- код визуальные настройки
Библиотека для примера
<nav role='navigation' class="t-text">
  <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>  
<style>

.uc-custom-menu nav {
	position: fixed;
	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;
}

.uc-custom-menu nav ul {
	margin-bottom: 0px !important;
	padding-left: 0px !important;
	list-style: none;
	position: relative;
	float: left;
	display: inline-table;
}

.uc-custom-menu 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;
}

.uc-custom-menu nav ul li:hover {
	background: rgba(0,0,0,.15);
}

.uc-custom-menu nav ul li:hover > ul {
	display: block;
}

.uc-custom-menu 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;
}

.uc-custom-menu nav ul li a {
	display: block;
	padding: 30px 10px;
	color: #222 !important;
	font-size: .9em;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
}

.uc-custom-menu 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);
}

.uc-custom-menu nav ul ul li {
	float: none;
	position: relative;
}

.uc-custom-menu nav ul ul li a {
	padding: 15px 30px;
	border-bottom: 1px solid rgba(0,0,0,.05);
}

.uc-custom-menu nav ul ul ul {
	position: absolute;
	left: 100%;
	top: 0;
}
          
</style>
Made on
Tilda