"Hoverable Dropdown Clean code"
Bootstrap 3.0.0 Snippet by chiraggoyal777

Post to Facebook Tweet this

<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 ----------> <!Doctype HTML> <div class="container"> <h2>Hoverable Dropdown</h2> <p>Working on advance dropdown.</p> <div class="dropdown"> <button class="dropbutton">Dropdown</button> <ul class="content"> <li id="a1"><a href="#">Link 1</a> <ul> <li><a href="#">Sub link 1</a></li> <li><a href="#">Sub link 2</a></li> <li><a href="#">Sub link 3</a></li> <li><a href="#">Sub link 4</a></li> <li><a href="#">Sub link 5</a></li> </ul> </li> <li id="a2"><a href="#">Link 2</a> <ul> <li><a href="#">Sub link 5</a></li> <li><a href="#">Sub link 6</a></li> <li><a href="#">Sub link 7</a></li> <li><a href="#">Sub link 8</a></li> </ul> </li> <li id="a3"><a href="#">Link 3</a> <ul> <li><a href="#">Sub link 9</a></li> <li><a href="#">Sub link 10</a></li> <li><a href="#">Sub link 11</a></li> <li><a href="#">Sub link 12</a></li> <li><a href="#">Default</a></li> </ul> </li> </ul> </div> <span><h4>This Content will be hidden on dropdown.</h4></span> </div>
/* Universal rule*/ body { height: 700px; margin: 12px; background-color: #f7f9fa; } a { padding: 12px 16px; text-decoration: none; display: block; } a:hover { text-decoration: none; } /* rule ends*/ .dropdown { position: relative; display: inline-block; } span { transition-delay: 0.8s; /* equal to total time line 41 */ } .dropdown:hover + span { visibility: hidden; transition-delay: 0s; } .dropbutton { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; transition: all 0.4s ease-out 0.4s; } .dropbutton:focus { outline: none; } .dropdown:hover .dropbutton { background-color: #093; transition: all 0.5s; } .content { visibility: hidden; /*Use visibilty: hidden; property instead of Display: none;*/ padding: 0; margin: 0; left: 0; top: 100%; list-style-type: none; position: absolute; background-color: #f7f7f7; min-width: 180px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 1; transform: translateY(0); transition: all 0.4s ease-out 0.4s; /*border: 2px solid black;*/ } .dropdown:hover .content { visibility: visible; transform: translateY(10px); transition: all 0.3s ease-out; } .content >li { position: relative; top: 0; border-left: 4px solid transparent; } .content >li:hover { background-color: #cf9; border-left: 4px solid #606; transition: background-color 0.5s; } .content >li ul { visibility: hidden; padding: 0; margin: 0; left: 100%; top: 0; list-style-type: none; position: absolute; background-color: #000; box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 1; min-width: 100px; } .content >li:hover >ul{ visibility: visible; min-width: 200px; transition: all 0.5s; } .content li ul > li:first-child:before { content: "\f0d9"; /* FontAwesome Unicode */ font-size: 28px; font-family: FontAwesome; float: left; top: 4px; left: -8px; position: relative; color: #0d172e; } .content li ul > li:first-child:hover:before { color: #0cf; transition: all 0.5s; } .content li ul > li:not(:first-child){ margin-top: 2px; } .content li ul > li { position: relative; background-color: #0d172e; } .content li ul > li:hover { background-color: #0cf; transition: all 0.5s; }

Questions / Comments: