<nav>
<ul>
<li id="menu1"class="menu"><a href="#">menu1</a></li>
<ul class="submenu1">
<li id="submenu1"class="submenu"><a href="#">submenu1</a></li>
<li id="submenu2"class="submenu"><a href="#">submenu2</a></li>
<li id="submenu3"class="submenu"><a href="#">submenu3</a></li>
<li id="submenu4"class="submenu"><a href="#">submenu4</a></li>
<li id="submenu5"class="submenu"><a href="#">submenu5</a></li>
</ul>
<li id="menu2"class="menu"><a href="#">menu2</a></li>
<li id="menu3"class="menu3"><a href="#">menu3</a></li>
<ul class="submenu3">
<li id="submenu1"class="submenu"><a href="#">submenu1</a></li>
<li id="submenu2"class="submenu"><a href="#">submenu2</a></li>
<li id="submenu3"class="submenu"><a href="#">submenu3</a></li>
<li id="submenu4"class="submenu"><a href="#">submenu4</a></li>
<li id="submenu5"class="submenu"><a href="#">submenu5</a></li>
</ul>
<li id="menu4"class="menu"><a href="#">menu4</a></li>
</ul>
</nav>a{
text-decoration:none;
font-size:1.5em;
color:white;
}
li{
list-style: none;
}
nav ul{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
background:black;
}
nav>ul{width:80%;}
.submenu>a{width:100px;}
nav>ul>ul{
position:absolute;
margin-top:30px;
display:flex;
flex-flow:column;
padding:5px;
}
.submenu3{
margin-left:40%;
}$(document).ready(function(){
$("nav>ul>ul").hide();
});
$("#menu3").click(function(){
$(".submenu3").toggle("slow");
});
$("#menu1").click(function(){
$(".submenu1").toggle("slow");
});
External CSS
This Pen doesn't use any external CSS resources.