Как сделать так, чтобы многоуровневое выпадающее меню выпадало более плавно с помощью Jquery?

Question

[DmSS1997]

Вот так выглядит html код

<ul class="menu my-5" >
				<li><a href="">Menu</a>
					<ul>
						<li><a href="">Sub-Menu</a>
							<ul>
								<li><a href="">Sub-Sub-Menu</a></li>
								<li><a href="">Sub-Sub-Menu</a></li>
								<li><a href="">Sub-Sub-Menu</a></li>
							</ul>
						</li>
						<li><a href="">Sub-Menu</a>
							<ul>
								<li><a href="">Sub-Sub-Menu</a></li>
								<li><a href="">Sub-Sub-Menu</a></li>
								<li><a href="">Sub-Sub-Menu</a></li>
							</ul>
						</li>
						<li><a href="">Sub-Menu</a></li>
						<li><a href="">Sub-Menu</a></li>
						<li><a href="">Sub-Menu</a>
							<ul>
								<li><a href="">Sub-Sub-Menu</a></li>
								<li><a href="">Sub-Sub-Menu</a></li>
								<li><a href="">Sub-Sub-Menu</a></li>
							</ul>
						</li>
						<li><a href="">Sub-Menu</a></li>
						<li><a href="">Sub-Menu</a></li>

					</ul>
				</li>
				<li><a href="">Menu</a>
				</li>
			</ul>

Вот так выглядит css код:

.menu{
			display: block;
			position: relative;
			justify-content:center;
			margin-left: 30%;

		}
		.menu li{
			width: 190px;
			list-style: none;
			/*background-color: #0275d8;*/
			position: relative;
			padding: 1.5px;
			margin-top: 1px;
			text-align: center;
		}
		.menu a{
			color:white;
			text-decoration: none;
			background-color: #dc3545;;
			
			display: block;
			text-align: center;
			padding-top:15px;
			transition: all 0.8s;
		}
		.menu a:hover{
			color:white;
			background-color: #d97777;
			cursor: default;

		}
		.menu ul{
			position: relative;
			display: none;
			top:-105px;
			left:155px;


		}

		.menu li:hover > ul{
			display: block;

		}
		.menu ul ul {
			display: none;
			position: absolute;

		}

Из-за того что в css используется display, а не visibility и opacity , то задать анимацию не получается. Нужно сделать это через скрипты. Я не очень знаю jquery, поэтому прошу помочь вас написать мне jquery код, чтобы это выпадало более плавно. Сам я попробовал сделать это, но получилось не очень. Меню стало выпадать плавно, но всё разом(

Comments

[NQUARE]

Ну дык а в чём проблема юзать opacity?

Answer 1

[NQUARE]

Использовать opacity вместо display и добавить transition.

Comments

[DmSS1997]

Это решение имеет смысл, но в таком случае подскажите пожалуйста, как сделать так, чтобы меню выпадало только в случае наведения на ссылку(на кнопку саму), а при наведении на область ниже неё, ничего не выпадало. При этом нужно сохранить position relative, для того чтобы при добавлении новых элементов сохранялось адаптивность и ничего не наезжало на блок ниже

[vvanyazz]

DmSS1997, pointer-events: none, когда список скрыт и auto при активности