"Mega Menu"
Bootstrap 3.3.0 Snippet by yasinsunmaz

<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-fluid nav-bg"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Anasayfa <span class="sr-only">(current)</span></a></li> <li><a href="#">Hakkımda</a></li> <li><a href="#">Teknoloji</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Web Tasarım <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Tümü</a></li> <li><a href="#">HTML 5</a></li> <li><a href="#">CSS 3</a></li> <li><a href="#">Java Script</a></li> <li><a href="#">Jquery</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Yazılım <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Tümü</a></li> <li><a href="#">PHP</a></li> <li><a href="#">ASP .NET MVC</a></li> <li><a href="#">T SQL</a></li> </ul> </li> <li><a href="#">Projeler</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </div> </div>
.container-fluid.nav-bg{ background-color: #171b1b; border-bottom: 5px solid #4aaaa5; } .navbar-collapse{ padding: 0; } .navbar-nav > li > a { color: #ffffff; background-color: #171b1b; font-size: 16px; font-weight: 300; } .navbar-nav > li > a:hover, .navbar-nav > li > a:focus { color: #ffffff; background-color: #4aaaa5; } .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { color: #ffffff; background-color: #4aaaa5; } .navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus { color: #ffffff; background-color: #4aaaa5; } .navbar-toggle .icon-bar { display: block; width: 22px; height: 3px; background-color: #cccccc; } .dropdown-menu{ border-radius: 0; }

Related: See More


Questions / Comments: