<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav> <ul> <li>style 1 <ul class="drop-menu menu-1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </li> <li>style 2 <ul class="drop-menu menu-1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </li> <li>style 3 <ul class="drop-menu menu-1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </li> <li>style 4 <ul class="drop-menu menu-1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </li> </ul>continue... </nav>

nav { padding:50px; text-align:center; } nav ul { list-style:none; padding:0; margin:0; display:inline-block; background:#ddd; border-radius:5px; } nav ul li { float:left; width:150px; height:65px; line-height:65px; position:relative; text-transform:uppercase; font-size:14px; color:rgba(0,0,0,0.7); cursor:pointer; } nav ul li:hover { background:#d5d5d5; border-radius:5px; } ul.drop-menu { position:absolute; top:100%; left:0%; width:100%; padding:0; } ul.drop-menu li { background:#666; color:rgba(255,255,255,0.7); } ul.drop-menu li:hover { background:#606060; } ul.drop-menu li:last-child { border-radius:0px 0px 5px 5px; } ul.drop-menu li { display:none; } ul li:hover > ul.drop-menu li { display:block; } //menu 1 ----------- li:hover > ul.drop-menu.menu-1 li { perspective:1000px; opacity:0; animation:name:menu1,duration:300ms,timing-function:ease-in-out,fill-mode:forward; } @keyframes menu1 { 0% { opacity:0; transform:rotateY(-90deg) translateY(30px); } 100% { opacity:1; transform:rotateY(0deg) translateY(30px); } }