Горизонтальное меню в двумя подменю по клику
 

Здравствуйте, уважаемые форумчане! Всем доброго времени суток!

Мне нужно для своего форума сделать горизонтальное меню из семи пунктов с выпадающими по клику подменю. Один из пунктов меню должен содержать третий уровень вложенности и открываться как меню-аккордеон, то есть вниз, а не вбок от второго уровня. При этом предыдущий открытый пункт меню должен закрываться при открытии любого другого пункта. А также при щелчке мыши по области страницы сайта вне меню должны закрываться все пункты меню (и второго и третьего уровня).

Почти три года назад я делала такое меню, использовав готовый скрипт:

<script type="text/javascript">
$(document).ready(function () {

function hideallDropdowns() {
$(".dropped .drop-menu-main-sub").hide();
$(".dropped").removeClass('dropped');
$(".dropped .drop-menu-main-sub .title").unbind("click");
}

function showDropdown(el) {
var el_li = $(el).parent().addClass('dropped');
el_li
.find('.title')
.click(function () {
hideallDropdowns();
})
.html($(el).html());

el_li.find('.drop-menu-main-sub').show();
}

$(".drop-down").click(function(){
showDropdown(this);
});

$(document).mouseup(function () {
hideallDropdowns();
});
});
</script>

(Меню стоит вот здесь: http://mamasoldata.mybb.ru/. Находится наверху под возрастом форума. )

Но третий уровень там выпадает вбок. И оно НЕ адаптивное.

Сейчас нашла в инете скрипт спойлера:

<script type="text/javascript">
let sp_content2=$('.sp_content2'),sp_title2=$('.sp_tit le2');
sp_content2.hide();
sp_title2.on('click',function(){
let inx=$('.sp_title2').index(this);
if($(sp_content2[inx]).css('display')==='none'){
$(sp_content2).slideUp(100);
$(sp_content2[inx]).slideDown(100);
}else{
$(sp_content2).slideUp(100);
}
})
</script>

Некое подобие того, что я хотела бы сделать с меню находится вот здесь: http://mamatest3.mybb.ru/ . Первый пункт «Вопросы» как раз открывается как аккордеон.
Понимаю, что это по сути «костыли». Поставила два скрипта, задав разные селекторы. Но в этом варианте меню дёргается и разъезжается.
Попробовала написать скрипт самостоятельно:


<script type="text/javascript">
$(document).ready(function() {
function hideallDropdowns() {
$('.menu .button').on('click', function() {
$(this).children('ul').slideToggle(500)
});
});
$(document).mouseup(function() {
hideallDropdowns();
});
});
</script>




Не работает(((.
Реализация вот здесь: http://mamatest4.mybb.ru/ . Но там не прописаны правильно стили. Совсем запуталась(((.

Я небольшой специалист. Просто HTML-любитель. HTML-разметка у меня проблем не вызывает. В CSS ориентируюсь. Но сильно путаюсь в классах и селекторах. Учусь по урокам-статьям в интернете. Использую справочники.

Помогите, пожалуйста. Подскажите, что не так?

Ещё хотела спросить:
1. Как лучше сделать при написании стилей: присвоить всем подменю отдельные селекторы ( типа .sub-menu, .sub-sub-menu) или прописывать свойства, используя .menu ul li ul… и тому подобное?
2. Как лучше: вложить подменю в div или чтобы оно просто выпадало?
<ul>
<li>
<span> ВОПРОСЫ</span>
<div>
<ul class=”submenu”>
<li><a>…..</a></li>
<li><a>…</a></li>
</ul>
<div>
</li>
</ul>

Или

<ul>
<li>
<span> ВОПРОСЫ</span>
<ul class=”submenu”>
<li><a>…..</a></li>
<li><a>…</a></li>
</ul>
</li>
</ul>
3. Название пункта меню (например «ВОПРОСЫ») заключить лучше в <span></span> или в <div></div>?
4. Что лучше прописать тегу li основного меню: просто float: left; или display: inline; float: left; ? Спрашиваю, потому что мне ещё всё меню надо сделать адаптивным. (Собственно, адаптивной надо сделать всю шапку форума. Вот здесь я делала адаптивность: http://mamatest2.rolebb.su/ . )

Извините, если что-то пропустила в своих вопросах. Мне очень Ваша помощь! Буду бесконечно благодарна и признательна за Ваши подсказки.

P.S. В силу того, что я работаю в сменном графике, читать Ваши ответы и применить их на практике могу только каждый четвёртый день.

Извините, если что не так.

Ваше меню можно сделать используя только HTML и CSS.

Оба варианта работоспособны! Первый вариант лучше подходит, когда вы по разному хотите сочетать элементы на странице, ну а меню имеет определённую структуру, и чтобы легче было менять местами пункты меню, лучше подходит второй вариант! (Вам не придётся переименовывать классы!)

Элементы подменю так и так находятся в контейнере (элемент ul), так что особого смысла этот div не добавляет.

Лучше, чтобы это была ссылка или кнопка, поскольку это элементы, которые могут принимать фокус по умолчанию, и соответственно вы сможете в CSS написать, что если пользователь взаимодействует с кнопкой, то открыть подменю!

Можно просто...
display: inline-block;
или...
display: flex; flex-wrap: wrap;

Вот я попробовал сделать такое меню, в широком окне оно как полоска и подменю появляется сбоку, а в узком окне подменю появляется снизу, а само меню сворачивается в гамбургер.

Посмотрите в примере: Вопросы -> Кабинет администации -> Полезная информация

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<title>Document</title>
</head>
<body>
	<nav tabindex="0">
		<ul>
			<li>
				<a href="#1">Вопросы</a>
				<ul>
					<li>
						<a href="#1">Кабинет администации</a>
						<ul>
							<li>
								<a href="#1">Полезная информация</a>
								<ul>
									<li><a href="#1">Полезная информация</a></li>
									<li><a href="#1">Встреча дембеля</a></li>
									<li><a href="#1">Стихи, юморные рассказы...</a></li>
									<li><a href="#1">Служба по контракту</a></li>
									<li><a href="#1">Военные сборы</a></li>
								</ul>
							</li>
							<li>
								<a href="#1">Встреча дембеля</a>
								<ul>
									<li><a href="#1">Полезная информация</a></li>
									<li><a href="#1">Встреча дембеля</a></li>
									<li><a href="#1">Стихи, юморные рассказы...</a></li>
									<li><a href="#1">Служба по контракту</a></li>
									<li><a href="#1">Военные сборы</a></li>
								</ul>
							</li>
							<li><a href="#1">Стихи, юморные рассказы...</a></li>
							<li><a href="#1">Служба по контракту</a></li>
							<li><a href="#1">Военные сборы</a></li>
						</ul>
					</li>
					<li>
						<a href="#2">Горячая линия</a>
						<ul>
							<li><a href="#1">Полезная информация</a></li>
							<li><a href="#1">Встреча дембеля</a></li>
							<li><a href="#1">Стихи, юморные рассказы...</a></li>
							<li><a href="#1">Служба по контракту</a></li>
							<li><a href="#1">Военные сборы</a></li>
						</ul>
					</li><li>
						<a href="#2">Ваши вопросы</a>
						<ul>
							<li><a href="#1">Полезная информация</a></li>
							<li><a href="#1">Встреча дембеля</a></li>
							<li><a href="#1">Стихи, юморные рассказы...</a></li>
							<li><a href="#1">Служба по контракту</a></li>
							<li><a href="#1">Военные сборы</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="#1">Поиск</a>
				<ul>
					<li><a href="#1">Поиск части</a></li>
					<li><a href="#2">Поиск по слову</a></li>
				</ul>
			</li>
			<li>
				<a href="#1">Правила</a>
				<ul>
					<li><a href="#1">Правила</a></li>
					<li><a href="#2">Правила на форуме</a></li>
					<li><a href="#3">Правила сетевого этикета</a></li>
					<li><a href="#3">Наведение порядка</a></li>
					<li><a href="#3">Запрещается</a></li>
					<li><a href="#3">Ваши данные</a></li>
				</ul>
			</li>
			<li>
				<a href="#about">Мой форум</a>
				<ul>
					<li><a href="#1">Участники</a></li>
					<li><a href="#2">Профиль</a></li>
					<li><a href="#3">Сообщения</a></li>
					<li><a href="#3">Подписка</a></li>
					<li><a href="#3">Мои посты</a></li>
				</ul>
			</li>
			<li>
				<a href="#about">Отдохнём</a>
				<ul>
					<li><a href="#1">Клубы по интересам</a></li>
					<li><a href="#2">Комната отдыха</a></li>
				</ul>
			</li>
			<li>
				<a href="#about">Главная</a>
			</li>
			<li>
				<a href="#about">Каталог частей</a>
			</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, #46332c, #364533, #3c4e36, #495437, #575b40);
	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 li > ul > li > ul > li > ul {
	position: static;
	margin: 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>
</body>
</html>

Структура меню однородная, вы без проблем можете переставлять пункты меню...
Вы можете открыть этот пример в отдельном окне, чтобы изменять его размеры, и смотреть, как оно изменяется...
https://codepen.io/Malleys/pen/KYKmpZ?editors=1000

Ещё тот же пример, если я вдруг не так понял...
https://codepen.io/Malleys/pen/EJxWJd?editors=1000
https://codepen.io/Malleys/pen/vMYxoY?editors=1000