<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container-fixed"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project Name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown "><a href="#" id="drop1" data-toggle="dropdown" class="dropdown-toggle" role="button">Books <b class="caret"></b></a> <ul role="menu" class="dropdown-menu" aria-labelledby="drop1"> <li role="presentation"><a href="#" role="menuitem">HTML</a></li> <li role="presentation"><a href="#" role="menuitem">CSS</a></li> <li role="presentation"><a href="#" role="menuitem">JQuery</a></li> <li role="presentation"><a href="#" role="menuitem">JavaScript</a></li> <li role="presentation"><a href="#" role="menuitem">Bootstarp</a></li> </ul> </li> <li class="dropdown "><a href="#" id="drop1" data-toggle="dropdown" class="dropdown-toggle" role="button">services <b class="caret"></b></a> <ul role="menu" class="dropdown-menu" aria-labelledby="drop1"> <li role="presentation"><a href="#" role="menuitem">services-1</a></li> <li role="presentation"><a href="#" role="menuitem">services-2</a></li> <li role="presentation"><a href="#" role="menuitem">services-3</a></li> <li role="presentation"><a href="#" role="menuitem">services-4</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div>

.open > .dropdown-menu { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity:1; } .dropdown-menu { opacity:.3; -webkit-transform-origin: top; transform-origin: top; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: scale(1, 0); display: block; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } /* Custom container */ .container-fixed { margin: 10% auto; max-width: 480px; } .navbar-nav { float:right; } h1,h2,h3,.highlight,.navbar a, .navbar-brand,#masthead h4 { } h3 a { font-size: 24pt; } .img_cover{ max-width: 150px; }