Simple menus are always smaller in size and retain their beauty. In this code we have a menu with the help of Bootstrap. This menu has a dark and black theme and the menu items are white. On the other side is an icon that you can replace with your website icon. Menus that have a submenu will open under the menu by placing the mouse cursor over them. The submenu has a white background and the submenus title is black. The menu items themselves turn yellow in hover mode.


HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="all">
    <div class="body-h">
        <div class="wrapper">
            <header class="header_wrapper">
                <div class="container">
                    <h3 class="title" style="color: #fff; text-align: center;">
                        This menu is made with Bootstrap and is compatible with all screens.
                    </h3>
                    <div class="menu-logo row">
                        <div class="col-md-12 clearfix">
                            <div class="logo_wrapper">
                                <h1 id="logo"> 
                                    <a href=""> 
                                        <img class="logo" src="http://www.devanswer.com/img/logo_bottom.png" alt=""> 
                                    </a>
                                </h1>   
                            </div><!-- logo -->
                            <div class="nav-bar-outer">
                                <div class="nav-bar-wrap toggled">
                                    <div class="main-nav-wrap" id="sidebar-wrapper">
                                        <nav class="navbar">
                                            <div class="container-fluid">
                                                <div class="navbar-header">
                                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                                        <i class="fa fa-bars"></i>
                                                    </button>
                                                </div><!-- navbar-header -->
                                                <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
                                                    <ul class="main-nav-inner sidebar-nav clearfix">
                                                        <li class="menu-item">
                                                            <a href="#">
                                                                Home
                                                            </a>
                                                        </li>
                                                        <li class="menu-item menu-item-has-children">
                                                            <a href="#">
                                                                Projects
                                                            </a>
                                                            <div class="sub-menu-wrap is-sub-menu">
                                                                <ul class="sub-menu-inner">
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div><!-- sub menu wrap -->
                                                        </li>
                                                        <li class="menu-item menu-item-has-children">
                                                            <a href="#">
                                                                Contact
                                                            </a>
                                                            <div class="sub-menu-wrap is-sub-menu">
                                                                <ul class="sub-menu-inner">
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div><!-- sub menu wrap -->
                                                        </li>
                                                        <li class="menu-item menu-item-has-children">
                                                            <a href="#">
                                                                About
                                                            </a>
                                                            <div class="sub-menu-wrap is-sub-menu">
                                                                <ul class="sub-menu-inner">
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                    <li class="menu-item">
                                                                        <a href="#">
                                                                            Submenu        
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div><!-- sub menu wrap -->
                                                        </li>
                                                    </ul>
                                                </div><!-- collapse -->
                                            </div><!-- container-fluid -->
                                        </nav>      
                                    </div><!-- main-nav-wrap -->
                                </div>
                            </div><!-- nav-bar-outer -->
                        </div><!-- col -->
                    </div><!-- menu-logo -->
                </div><!--  container -->
            </header><!--  header_wrapper -->
        </div>
    </div>
</div>
<li<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
html, body {
  height: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
  background: #E3DFD2;
}
header.header_wrapper {
    position: fixed;
    z-index: 99;
    width: 100%;
    background-color: black;
}
a:hover {
    text-decoration: none;
}
.sub-menu-wrap.is-sub-menu ul li:hover a, .line-color, .small-border, .date-box .day {
    background-color: #ffd200;
    color: #111 !important;
}
.transition {
    transition: 0.3s all linear;
    -moz-transition: 0.3s all linear;
    -webkit-transition: 0.3s all linear;
}
.main-nav-inner > li:hover > a, .top-nav-left .social a:hover {
    color: #ffd200 !important;
}
.menu-logo {
    margin-top: 30px;
}
.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.logo_wrapper {
    float: right;
}
.nav-bar-outer {
    float: left;
}
.main-nav-wrap, .nav-bar-outer {
    display: block;
    position: relative;
}
.nav-bar-outer {
    z-index: 999;
}
.nav-bar-wrap {
    display: block;
    z-index: 999;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
}
.main-nav-wrap {
    text-align: right;
    line-height: 0;
    color: #fff;
}
element.style {
}
.main-nav-wrap nav.navbar {
    min-height: 40px;
    margin-bottom: 0;
}
.container-fluid {
    padding: 0 !important;
}
.navbar-toggle {
    margin-top: 0;
    color: #fff;
    float: right;
    z-index: 9999;
    margin-right: 10px;
}
.is-sub-menu li, .main-nav-inner > li.menu-item-has-children {
    position: relative;
}
.main-nav-inner > li {
    display: block;
    float: left;
    line-height: 40px;
}
.main-nav-inner .is-sub-menu {
    display: block;
    visibility: hidden;
    text-align: right;
    opacity: 0;
    position: absolute;
    top: 120%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    border-top: 2px solid #ffd200;
    min-width: 185px;
    z-index: 9999;
    -webkit-box-shadow: 2px 2px 1px rgba(24,24,24,.05);
    -moz-box-shadow: 2px 2px 1px rgba(24,24,24,.05);
    box-shadow: 2px 2px 1px rgba(24,24,24,.05);
    border-left: 1px solid rgba(24,24,24,.05);
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    -o-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.main-nav-inner > li > a {
    display: inline-block;
    padding: 0 10px;
    line-height: inherit;
    color: #FFF;
    font-size: 14px;
    font-family: revert;
    font-weight: bold;
}
.main-nav-inner .is-sub-menu:not(.mega-menu-wrap) a {
    display: block;
    line-height: 1;
    position: relative;
    left: -5px;
    padding: 10px 25px 10px 10px;
    white-space: nowrap;
    font-size: 13px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    text-align: left;
    color: rgb(0 0 0);
}
.sub-menu-wrap.is-sub-menu > ul {
    padding: 0 0 0 7px;
}
img.logo {
    width: 100px;
    height: 75px;
}
li{
    list-style: none;
}
@media (min-width: 768px){
    .navbar {
        border-radius: 4px;
    }
    .main-nav-inner li:hover > .is-sub-menu {
        visibility: visible;
        opacity: 1;
        top: 100%;
        left: auto;
        right: auto;
        bottom: auto;
        pointer-events: auto;
    }
    i.explain-menu.fa.fa-angle-down {
        font-size: 16px;
        transition: 0.4s;
    }
    li:hover > a .explain-menu {
        transform: rotate(-180deg);
    }
}
@media (max-width: 768px){
    .main-nav-inner > li {
        float: none;
        display: block;
        border-bottom: 1px solid;
        text-align: left;
        border-color: #5e788d;
    }
    div#bs-example-navbar-collapse-1 {
        width: 100% !important;
    }
    .main-nav-inner > li > a {
        font-size: 14px;
        width: 100%;
    }
    .main-nav-inner .is-sub-menu {
        display: none;
        visibility: visible;
        text-align: right;
        opacity: 1;
        position: relative;
        border-top: none;
        top: 0;
        width: 100%;
    }
    ul.main-nav-inner.sidebar-nav.clearfix {
        float: none;
        width: 100%;
        padding-left: 0;
        display: block;
    }
    .nav-bar-outer {
        float: none;
    }
    .container-fluid {
        width: 100%;
    }
    .navbar-header {
        float: none;
        text-align: left !important;
    }
    button.navbar-toggle {
        display: inline-block;
        font-size: 17px;
        float: none !important;
        top: 18px;
        margin: 0;
    }
    .explain-menu {
        display: block;
        font-size: 32px;
        float: right
    }
    .active .explain-menu {
        transform: rotate(-180deg);
    }
}
Javascript
var mobile_menu=$('.collapse');
var sub_mobile_menu=mobile_menu.find('li.menu-item-has-children');
var sub_mobile_a=mobile_menu.find('li.menu-item-has-children > a');
sub_mobile_a.append('<i class="explain-menu fa fa-angle-down"></i>');
$('.explain-menu').click(function(e){
    e.preventDefault();
    $(this).parent('a').toggleClass('active').siblings('.sub-menu-wrap').slideToggle();
});