jquery - Gap appearing in navigation bar and dropdown -

1. i can't seem solve 'gap' appears below navigational tabs
2. also can please me drop down navigation? need put 3 subheadings under shop, 2 subheadings under discover , 3 subheadings under edge club. i'm confused multiple < li > , < ul > !

this first time , in advance ...

.navigation {  	background-color: #454242;  	text-align:center;  }    ul.menu {  	height: 43px;  	background-color: #454242;  	list-style-type: none;  	margin: 0;  	padding: 0;  	overflow: hidden;  	transition: 1.0s;  	font-family: 'lato', sans-serif;  	font-weight:400;  	display:inline-block;  	text-align: center;  }    ul.menu li {  	float: left;  	display: inline;  }    ul.menu li {  	display: inline-block;  	color: #ffffff;  	text-align: center;  	padding: 10px 20px;  	text-decoration: none;  	transition: 1.0s;  	font-size: 17px;  	height: 23px;  }    ul.menu li a:hover {  	background-color: #ffffff;  	color: black;  }    ul.menu li a:active {  	background-color: #ffffff;  	color: black;  }    ul.menu li.icon {  	display:none;  }    @media screen , (max-width: 680px) {	  ul.menu li:not(:first-child){  	display:none;  	margin: auto;  	float: left;  }  	  ul.menu li.icon {  	display: inline;  	float: left;  	position: absolute;  	left: 0px;  	text-align: left;  }  }    @media screen , (max-width: 680px) {  	  ul.menu.responsive li.icon {  	  	float: left;  	position: absolute;  	text-align: left;  	color: black;  }  	  ul.menu.responsive{  	position: relative;  	height: 258px;  	transition: 1.0s;  	width: 100%  }  	  ul.menu.responsive li{  	float: none;  	display: inline;  	  }  	  ul.menu.responsive li a{  	display:block;  	text-align: center;  }	  }

<div class="navigation col-12">  <ul class="menu">  <li class="icon">  <a href="javascript:void(0);"onclick="dropdownmenu()">&#9776;</a></li>  <li> <a href="test.html">home</a></li>  <li> <a href="test.html">eat</a></li>  <li> <a href="test.html">shop</a></li>  <li> <a href="test.html">discover</a></li>  <li> <a href="test.html">edge club</a></li>  <li> <a href="test.html">contact</a></li>  </ul>  </div>    <script>  function dropdownmenu() {  	document.getelementsbyclassname("menu")[0].classlist.toggle("responsive");  }  </script>

inline elements automatically have space applied around them. because ul-menu defined inline-block, receives treatment. space gap below tabs.

to remove space, change display block , can center using width , margin:auto.

---

as subheadings, need nest lists , apply similar styles. here's example.