<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"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <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 js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">SHOP</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Öko-Tex Standard </li> <li><a href="#">Öko-Tex Standard 100</a></li> <li class="divider"></li> <li class="dropdown-header">Stoffe</li> <li><a href="#">SnapPap</a></li> <li><a href="#">Kork</a></li> <li><a href="#">Mode - Frühjahr/Sommer</a></li> <li><a href="#">Mode - Herbst/Winter NEU</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Tante Ema</li> <li><a href="#">Stoffe</a></li> <li class="divider"></li> <li class="dropdown-header">Standard</li> <li><a href="#">Standard</a></li> <li><a href="#">Gabardine und Leinen</a></li> <li><a href="#">Futter und Satin</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Tante Ema</li> <li><a href="#">Stoffe</a></li> <li class="divider"></li> <li class="dropdown-header">Standard</li> <li><a href="#">Standard</a></li> <li><a href="#">Gabardine und Leinen</a></li> <li><a href="#">Futter und Satin</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Wolle</li> <li><a href="#">myboshi No. 1</a></li> <li><a href="#">myboshi No. 2</a></li> <li><a href="#">myboshi No. 5</a></li> <li class="divider"></li> <li class="dropdown-header"><a href="#">Reduzierte Stoffe</a></li> </ul> </li> </ul> </li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sortiment</a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">STOFFE</li> <li class="divider"></li> <li class="dropdown-header">MERCERIE</li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">SCHNITTMUSTER</li> <li class="divider"></li> <li class="dropdown-header">TANTE EMA</li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">VORHÄNGE</li> <li class="divider"></li> <li class="dropdown-header">AFRIKA STOFFE</li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">NÄHMASCHINEN</li> <li class="divider"></li> </ul> </li> </ul> </li> <li><a href="#">NEWS</a></li> <li><a href="#">INSPIRATIONEN</a></li> <li><a href="#">STANDORTE</a></li> </ul> </div><!-- /.nav-collapse --> </nav> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body { font-family: 'Open Sans', 'sans-serif'; } .navbar-default { background-color: #fff; border-color: #fff; } .navbar-default .navbar-nav>li>a { width:200px; color: #000; background-color: #fff; font-weight:bold; font-size: 20px; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:active, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:active, .navbar-default .navbar-nav>li>a:focus { color: #49c2c5; background-color: #fff; } .navbar-default .navbar-toggle { border-color: #49c2c5; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #49c2c5; } @media (min-width: 768px) { .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } } .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; border-color: #49c2c5; border-width: 5px; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; color: #222; padding: 3px 5px; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { font-size: 20px; color: #000; font-weight: bold; padding: 5px 60px 5px 5px; line-height: 30px; }