<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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 class="parent-1"> <a href="#">Menu style-1</a> <ul class="sub-menu-1"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> </ul> </li> <li class="parent-2"><a href="#">Menu style 2</a> <ul class="sub-menu-2"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> <li><a href="#">Sub Item 6</a></li> </ul> </li> <li class="parent-3"><a href="#">Menu style 3</a> <ul class="sub-menu-3"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> <li><a href="#">Sub Item 6</a></li> </ul> </li> <li class="parent-4"><a href="#">Menu style 4</a> <ul class="sub-menu-4"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> <li><a href="#">Sub Item 6</a></li> </ul> </li> <li class="parent-5"><a href="#">Menu style 5</a> <ul class="sub-menu-5"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> <li><a href="#">Sub Item 6</a></li> </ul> </li> <li class="parent-6"><a href="#">Menu style 6</a> <ul class="sub-menu-6"> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> <li><a href="#">Sub Item 4</a></li> <li><a href="#">Sub Item 5</a></li> <li><a href="#">Sub Item 6</a></li> </ul> </li> </ul> </nav>

.parent-1, .parent-2, .parent-3, .parent-4, .parent-5, .parent-6 { position:relative; } /* style 1 */ .sub-menu-1{ visibility:hidden; /* hide sub-menu */ position:absolute; top:100%; left: 0; width:100%; opacity:0; transform: translateY(-3em); z-index:-1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } .parent-1:hover .sub-menu-1{ visibility: visible; /* show submenu */ opacity:1; z-index:1; transform: translateY(0%); transition-delay: 0s,0s,0.3s; } /* style 2 */ .sub-menu-2{ visibility:hidden; /* hide sub-menu */ position:absolute; top:100%; left: 0; width:100%; opacity:0; transform: translateX(-3em); z-index:-1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } .parent-2:hover .sub-menu-2{ visibility: visible; /* show submenu */ opacity:1; z-index:1; transform: translateX(0%); transition-delay: 0s,0s,0.3s; } /* style 3 */ .sub-menu-3{ visibility:hidden; /* hide sub-menu */ position:absolute; top:100%; left: 0; width:100%; opacity:0; transform: scale(0,0); z-index:-1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } .parent-3:hover .sub-menu-3{ visibility: visible; /* show submenu */ opacity:1; z-index:1; transform: scale(1,1); transition-delay: 0s,0s,0.3s; } /* style 4 */ .sub-menu-4{ visibility:hidden; /* hide sub-menu */ position:absolute; top:100%; left: 0; width:100%; opacity:0; transform: translateY(3em); z-index:-1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; } .parent-4:hover .sub-menu-4{ visibility: visible; /* show submenu */ opacity:1; z-index:1; transform: translateY(0%); transition-delay: 0s,0s,0.3s; } /* style 5 */ .sub-menu-5{ visibility:hidden; /* hide sub-menu */ position:absolute; top:100%; left: 0; width:100%; opacity:0; transform:rotateX(80deg); z-index:-1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s, transform linear .3s; } .parent-5:hover .sub-menu-5{ visibility: visible; /* show submenu */ opacity:1; z-index:1; transform:rotateX(0deg); transition-delay: 0s,0s,0.3s; } /* style 6 */ .sub-menu-6{ visibility:hidden; /* hide sub-menu */ position:absolute; top:100%; left: 0; width:100%; opacity:0; transform: rotateY(50deg); z-index:-1; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s, transform linear .3s; } .parent-6:hover .sub-menu-6{ visibility: visible; /* show submenu */ opacity:1; z-index:1; transform: rotateY(0deg); transition-delay: 0s,0s,0.3s; } body{ padding: 2%; font: 15px/1.4 sans-serif; } nav a{ color:#fff; display: block; padding: 0.5em 1em; text-decoration: none; } nav a:hover{ color:#fff; } nav ul, nav ul li{ list-style-type: none; padding: 0; margin: 0; } nav > ul{ background:#f55; text-align:center; } nav > ul > li{ display: inline-block; } nav > ul > li:first-child { border-left: none; } ul{ background: #555; } /* nav > ul > li > a::before { border-color: #fff transparent transparent; border-style: solid; border-width: 5px; content: ""; margin-left: -5px; position: absolute; right: 0; top: 53%; transition: all.3s ease; } nav > ul > li > a:hover::before { right: 0; top: 33%; transform: rotate(180deg); } */