[Malleys]

искать кастомизация селекта
https://javascript.ru/forum/jquery/7...tml#post484087

Почти тристо строк и оно даже приблизительно не обладает тем функционалом, что есть у элемента <select>! рони, почему так? Дублировать код два раза... и к тому же оно плохо доступное!

Для этого есть HTML-элемент <select> к которому можно применять стили...

<style>
	select {
		display: inline-block;
		border: 2px solid #bbb;
		padding: 4px 22px 3px 5px;
		margin: 0;
		font: inherit;
		outline: none;
		line-height: 1.2;
		-webkit-appearance: none;
		border-radius: 6px;
		background: url('data:image/svg+xml,\
		<svg xmlns="http://www.w3.org/2000/svg" \
			width="10px" height="10px" viewBox="0 0 12 10" \
			stroke="%23bbb" stroke-width="1.3" stroke-linecap="round" \
			stroke-linejoin="round" fill="none"\
		>\
			<polyline points="2 4 5 7 8 4"></polyline>\
		</svg>') no-repeat right center / 20px 20px white;
	}

	select::-moz-focus-inner {
		border: 0;
	}

	select:focus {
		box-shadow: 0 0 3px 1px #ccc;
	}

	select:hover {
		background-color: #eee;
	}
</style>

<select>
    <option>Ширина ботинка</option>
    <option value="c">C</option>
    <option value="d">D</option>
    <option value="ee">EE</option>
</select>

<select>
    <option>Лезвие</option>
    <option value="11,5">11,5</option>
    <option value="12">12</option>
    <option value="12,5">12,5</option>
    <option value="13">13</option>
    <option value="13,5">13,5</option>
    <option value="14">14</option>
    <option value="14,5">14,5</option>
    <option value="15">15</option>
    <option value="15,5">15,5</option>
</select>

Очень сложная для меня задача( может кто то объяснит как и что делать с этим)

Вы можете удалить ненужные классы! Вот пример выпадающего меню... (также есть поддержка узких экранов и вложенности любого уровня!)

<nav tabindex="0">
	<ul>
		<li>
			<a href="#1">Dropdown menu item</a>
			<ul>
				<li><a href="#11">Dropdown item 1</a></li>
				<li><a href="#12">Dropdown item 2</a></li>
			</ul>
		</li>
		<li><a href="#2">Menu item</a></li>
		<li>
			<a href="#3">Dropdown menu item 2</a>
			<ul>
				<li><a href="#31">Second Dropdown item 1</a></li>
				<li><a href="#32">Second Dropdown item 2</a></li>
			</ul>
		</li>
	</ul>
</nav>

<style>

@import url("https://fonts.googleapis.com/css?family=Russo+One&subset=cyrillic");

nav {
	font-family: "Russo One", sans-serif;
}

nav li {
	position: relative;
	list-style: none;
}

nav ul {
	padding: 0;
	margin: 0;
	background: linear-gradient(45deg, #888, #aaa);
	text-shadow: 0 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .7);
}

nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

nav li ul {
	display: none;
	position: absolute;
	margin: -5px 0 0 5px;
	box-shadow:
		0 .1em 1em rgba(0, 0, 0, 0.3),
		inset 0 0 1px rgba(255, 255, 255, 0.5)
	;
}

nav li > ul > li > ul {
	left: 100%;
	top: 0;
	margin: 5px 0 0 -5px;
}

nav ul {
	border-radius: 5px;
}

nav li:focus-within > ul {
	display: block;
	display: flow-root;
	z-index: 1;
}

nav li a, nav > ul:before {
	color: white;
	text-decoration: none;
	display: block;
	padding: 1em;
	border-radius: 5px;
	white-space: nowrap;
}

nav li a:focus {
	background: rgba(0, 0, 0, .5);
	color: white;
}

@media (max-width: 840px) {
	nav > ul:before {
		content: "☰";
	}

	nav > ul {
		flex-direction: column;
		display: inline-block;
	}

	nav:focus-within > ul {
		display: block;
	}

	nav li {
		flex: 1;
		display: none;
	}

	nav:focus-within li {
		display: block;
	}

	nav li ul,
	nav li > ul > li > ul {
		position: static;
		margin: 10px;
	}

	nav > ul:before,
	nav li a {
		white-space: normal;
		text-align: center;
	}
}
		
</style>

Структура меню однородная, вы без проблем можете переставлять пункты меню...