Bootstrap 3 Mega Menu

Bootstrap 3 Mega Menu

by Harsh Bhatnagar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js"></script>
<script src="http://fonts.googleapis.com/css?family=Lato:100,300,100italic"></script>
<div class="navbar navbar-default navbar-static-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="#">Aplus</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown menu-large">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Report<b class="caret"></b></a>
                    <ul class="dropdown-menu megamenu row">
                        <li class="col-sm-3">
                            <ul>

                                <li><a href="#">Categorie</a></li>
                                <li><a href="#">categorie per Aria</a></li>
                                <li><a href="#">Costi e ricavi</a></li>
                                <li><a href="#">Costi del personale</a></li>

                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>

                                <li><a href="#">Incassato</a></li>
                                <li><a href="#">Protocolli</a></li>
                                <li><a href="#">Protocolli per area</a></li>
                                <li><a href="#">Fatturato</a></li>

                            </ul>
                        </li>

                    </ul>

                    <li class="dropdown menu-large">
                 ...

CSS

.navbar-default {
    color: #fff;
    background-color: #efefef;
    border-color: #333;
}

.navbar-default .navbar-nav > li > a {
    color: #333;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}

.navbar-default .navbar-brand {
    color: #333;
}

.menu-large {
    position: static !important;
}

.megamenu {
    padding: 20px 0px;
    width: 100%;
}

.megamenu> li > ul {
    padding: 0;
    margin: 0;
}

.megamenu> li > ul > li {
    list-style: none;
}

.megamenu> li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: normal;
}

.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
    text-decoration: none;
    color: #333;
    background-color: #f5f5f5;
}

.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
    color: #999999;
}

.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    cursor: not-allowed;
}

.megamenu.dropdown-header {
    color: #333;
    font-size: 18px;
}

@media (max-width: 768px) {
    .megamenu {
        margin-left: 0;
        margin-right: 0;
    }
    .megamenu> li {
        margin-bottom: 30px;
    }
    .megamenu> li:last-child {
        margin-bottom: 0;
    }
    .megamenu.dropdown-header {
        padding: 3px 15px !important;
    }
    .navbar-nav .open .dropdown-menu .dropdown-header {
        color: #333;
    }
}

.tab_menu:hover {
    color: #000;
}