Не работает выпадающее меню, как исправить?

Question

[Robert AW]

<ul class="main-menu">
							<li><a href="#">Для кухни</a></li>
							<li>
							<a href="#">Для ванны</a>
							<ul>
								<li><a href="#">Вариант1</a></li>
								<li><a href="#"></a>Вариант1</li>
								<li><a href="#"></a>Вариант1</li>
							</ul></li>
							<li>
							<a href="#">Для умывальника</a>
							<ul>
								<li><a href="#"></a>Вариант1</li>
								<li><a href="#"></a>Вариант2</li>
								<li><a href="#"></a>Вариант2</li>
							</ul></li>
							<li>
							<a href="#"> Для Биде</a>
							<ul>
								<li><a href="#"></a>Вариант2</li>
								<li><a href="#"></a>Вариант2</li>
								<li><a href="#"></a>Вариант2</li>
							</ul></li>
							<li>
							<a href="#">Душевые стойки</a>
							<ul>
								<li><a href="#"></a>Вариант2</li>
								<li><a href="#"></a>Вариант2</li>
								<li><a href="#"></a>Вариант2</li>
							</ul></li>
							<li>
							<a href="#">Промышленные смесители</a>
							<ul>
								<li><a href="#">Вариант2</a></li>
								<li><a href="#">Вариант2</a></li>
								<li><a href="#">Вариант2</a></li>
							</ul></li>
							<li><a href="#">Скидки</a></li>
						</ul>

.main-menu {
	list-style: none;
	float: left;
	padding-left: 0;
}
.main-menu>li {
	font-family: 'Roboto Condensed';
	font-weight: bold;
	text-transform: uppercase;
	font-size: 15px;
	display: inline;
	margin-left: 18px;
}
.main-menu a{
	color:#000;
}
.main-menu>li>ul li::after {
	content: ' ';
	padding-left: 5px;
	background: url(../img/menu_arrow.png) no-repeat 80%;
}

.main-menu>li:first-child {
	margin-left: 0;
}

.main-menu>li a:hover {

	color: #f58410;
}

.main-menu ul {
	display: none;
		position: absolute;
	list-style: none;
	padding: 0;
	float: none;	}

	.main-menu li:hover >ul {
		display: block;
	}

	.main-menu ul li {
		position: relative;
		float: none;
	}

Answer 1

[Андрей Б.]

Когда position устанавливается абсолютно, элемент может перемещаться относительно первого позиционированного предка.

Позиционированного? Что такое позиционированный элемент?

Позиционированный элемент — это тот, у которого значение position установлено как relative, absolute или fixed. Таким образом, если положение не задано статичным, то элемент позиционированный.

https://webref.ru/course/positioning/position

Следовательно, чтобы ul был относительно li, нужно для li указать position: relative; и left: 0; для ul