На самом деле существует множество вариантов создания выпадающего меню, но перегружать сайт лишними скриптами не нужно поэтому чтоб сделать выпадающее меню для сайта достаточно использования CSS и HTML. Ниже вы можете увидеть как будет выглядеть выпадающее меню.

Для начала нам нужно создать каркас из HTML кода.

<div id="menu">
	<ul class="menu">
		<li><a><span>Главная категория</span></a>
			<div id="submenu">
				<ul class="submenu">
					<li><a><span>Подкатегория 1</span></a></li>
					<li><a><span>Подкатегория 2</span></a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>

Думаю здесь все всем будет понятно. Но если не задавать стилей этой конструкции, то это меню будет выглядеть так 

Поэтому, чтобы наше меню выглядело именно так как сверху, нам нужно задать стили нашему меню.

#menu {text-decoration-line: none; display: flex;  justify-content: flex-start;text-transform: uppercase;-moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
.menu {list-style:none;  display: inline-flex; justify-content: space-between;padding: 15px; width: 100%; position: relative;-moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
.menu > li > a {color: #ccc;text-decoration: none;cursor: pointer; padding: 10px; background-color: black; border-radius: 25px;-moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
.menu > li:hover > a{background-color: #544e4e; zoom: 1.2; -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; border-radius: 0;}
#submenu {text-decoration-line: none; display: none; position: absolute;  background-color: #544e4e;;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1; top: auto; margin-top: 8px;}
.submenu  { width: 203px;-moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; list-style: none;display:flex;flex-wrap: wrap;align-content: stretch;justify-content: space-evenly;flex-direction: column;}
.submenu > li  {padding: 10px; background-color:black;margin: 6px; border-radius: 10px; text-align: center; }
.submenu > li > a {text-decoration: none; cursor: pointer; color: #ccc;}
.submenu  li:hover {background-color: #595a58;  -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; border-radius: 0;}
.menu > li:hover #submenu {display: flex; -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease;}

И наше всплывающее меню для сайта будет выглядеть так как сверху. Это лишь вариант всплывающего меню, поэксперементировав вы можете создать свое уникальное меню для сайта. Вот кстати вам песочница.

Если будет нужна помощь в создании выпадающего меню для сайта по вашему дизайну пишите, помогу бесплатно.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .