Андрей Федоров

При такой структуре html, только на js можно сделать. Типа того...

var menuItem = document.querySelector(".hoverlink");
menuItem.addEventListener("mouseover", function() {
	var dropDownMenu = document.querySelector(".vypadaushee-menu");
	dropDownMenu.style.display = "block";
});
var menuItem = document.querySelector(".hoverlink");
menuItem.addEventListener("mouseout", function() {
	var dropDownMenu = document.querySelector(".vypadaushee-menu");
	dropDownMenu.style.display = "none";
});

Вам нужен реально ШЛЕЙФ или достаточно просто области под курсором? Если второе - https://codepen.io/aliencash/pen/PqMKVq только текстуры под себя перерисуйте.

Не понятно что как должно работать при небольшой ширине экрана. Предварительно пока так https://codepen.io/aliencash/pen/ZJzRYQ
Давайте подробности.

попробуйте так https://codepen.io/aliencash/pen/ZKBNbJ

Спам-боты атакуют не форму, а скрипт-обработчик. Соответственно все что вы делаете на стороне клиента, в html или js вас не спасет. Нужна валидация на стороне сервера + черные списки ip адресов.

codepen.io/aliencash/pen/zZLyMa

Получится только для статических сайтов. Только захватить освобождающийся домен сложно. После того как срок закончится регистратор обычно регистрирует домен на себя и выставляет его на аукцион. Т.е. как минимум через год домен можно будет зарегистрировать на себя по стандартной цене.

без скриптов
codepen.io/aliencash/pen/vxxWRb?editors=1100

Можно с помощью атрибута pattern для input и регулярного изображения. Только учтите, что в случае атаки на форму, будут атаковать серверный скрипт, и валидация на стороне клиента уже не будет работать, даже если это js.

Ниже привожу регулярку только примерно. По точнее сами придумайте, согласно вашим условиям.

<input class="btn-input order-count" type="text" pattern="[1-9]\d{2}">

Не нравятся обертки - сделайте таблички. codepen.io/aliencash/pen/evJwmx
ps: )))