Bootstrap Responsive DropDown Menu, Bootstrap dropdown menubar

Bootstrap is a free and open source CSS framework guided on responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for template typography, form, button, navigation, and internal interface components.

This is bootstrap code, this code is found in head section


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

This is custom style for bootstrap


<style>
  .navbar{
    margin-bottom: 0px;   
}
.nav, .navbar-nav {
    text-align: center !important;
}
.navbar-nav>li>.dropdown-menu {
    margin-top: 0;
    border-radius: 10px;
    border: 1px Solid #eee;
    border-radius: 10px;
    padding: 0px;
    background-color: #eee;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover  {
    color:#C00;
    box-shadow: none;
    background-color:  transparent;}
}
    </style>

Bootstrap Resposive DropDown Menu Code


<nav class='navbar navbar-default'>
  <div class='container-fluid'>
    <div class='navbar-header'>
      <button class='navbar-toggle' data-target='#myNavbar' data-toggle='collapse' type='button'>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
        <span class='icon-bar'/>                        
      </button>
      <a class='navbar-brand' rel='home' href='https://mycoaching.in' style="padding-top:0px;">
<img src="https://cdn-images-1.medium.com/max/800/1*xLafMO5PAVL3QSwiYKV7CA.png" alt="my coaching" height="50"/>
        </a>
    </div>
    <div class='collapse navbar-collapse' id='myNavbar'>
      <ul class='nav navbar-nav'>
        <li itemprop='name'><a class='' href='/p/news.html' itemprop='url' title='News'>News</a></li>
        <li itemprop='name'><a class='' href='/p/jobs-news-online-form.html' itemprop='url' title='Latest Jobs'>Latest Jobs</a></li>
        <li itemprop='name'><a class='' href='/p/admit-card.html' itemprop='url' title='Admit Card'>Admit Card</a></li>
        <li itemprop='name'><a class='' href='/p/resultnews.html' itemprop='url' title='Result'>Result</a></li>                
        <li class='btn-group'>
          <a class='dropdown-toggle' data-toggle='dropdown' href='#'>More News <span class='caret'/></a>
          <ul class='dropdown-menu' role="menu">      
            <li itemprop='name'><a class='d-d-m-u' href='/p/answer-key.html' itemprop='url' title='Answer Key'>Answer Key</a></li>
            <li itemprop='name'><a class='d-d-m-m' href='/p/syllabus-of.html' itemprop='url' title='Syllabus News'>Syllabus News</a></li>
            <li itemprop='name'><a class='d-d-m-m' href='/p/admission.html' itemprop='url' title='Addmission News'>Addmission News</a></li>
            <li itemprop='name'><a class='d-d-m-d' href='/p/pramanpatra.html' itemprop='url' title='Certificate Verification'>Certificate Verification</a></li>
         </ul>
        </li>

        <li class='btn-group'>
          <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Subjec Wise Study <span class='caret'/></a>
          <ul class='dropdown-menu'>          
                <li><a class='d-d-m-u' href='https://www.mycoaching.in/p/hindi.html' title='Hindi'><b>Hindi</b></a></li>
                <li><a class='d-d-m-m' href='#' title='English'><b>English</b></a></li>
                <li><a class='d-d-m-m' href='#' title='Mathematics'><b>Mathematics</b></a></li>
                <li><a class='d-d-m-m' href='#' title='Basic Mathematics'> 1. Basic Mathematics</a></li>
                <li><a class='d-d-m-m' href='#' title='Advance Mathmatics'> 2. Advance Mathmatics</a></li> 
                <li><a class='d-d-m-m' href='#' title='Pure Mathematics'>  (I) Pure Mathematics</a></li>
                <li><a class='d-d-m-m' href='#' title='Applied Mathematics'>  (II) Applied Mathematics</a></li>
                <li><a class='d-d-m-m' href='#' title='SST'><b>SST</b></a></li>
                <li><a class='d-d-m-m' href='#' title='History'>   1. History</a></li>
                <li><a class='d-d-m-m' href='#' title='Geography'>   2. Geography</a></li>
                <li><a class='d-d-m-m' href='#' title='Environment Science'>   3. Environment Science</a></li>
                <li><a class='d-d-m-m' href='/p/science.html' title='SCIENCE'><b>SCIENCE</b></a></li>
                <li><a class='d-d-m-m' href='#' title='Physics'>   1. Physics</a></li>
                <li><a class='d-d-m-m' href='#' title='Chemistry'>   2. Chemistry</a></li>
                <li><a class='d-d-m-m' href='#' title='Biology'>   3. Biology</a></li>
                <li><a class='d-d-m-m' href='#' title='Computer Science'><b>Computer Science</b></a></li>
                <li itemprop='name'><a class='d-d-m-m' href='/p/phycology-and-pedagogy.html' itemprop='url' title='Phycology And Pedagogy'><b>Phycology And Pedagogy</b></a></li>
                <li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='Child Phycology'> 1. Child Phycology</a></li>
                <li itemprop='name'><a class='d-d-m-d' href='/p/pedagogy-education-science.html' itemprop='url' title='Education Science'> 2. Education Science</a></li>
         </ul>
        </li>

        <li class='btn-group'>
          <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Education Science <span class='caret'/></a>
          <ul class='dropdown-menu'>          
             <li itemprop='name'><a class='d-d-m-u' href='/p/phycology-and-pedagogy.html' itemprop='url' title='मनोविज्ञान और शिक्षण शास्त्र'>मन&#2379;व&#2367;ज&#2381;ञ&#2366;न और श&#2367;क&#2381;षण श&#2366;स&#2381;त&#2381;र</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/phycology.html' itemprop='url' title='मनोविज्ञान'>मन&#2379;व&#2367;ज&#2381;ञ&#2366;न</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/pedagogy-education-science.html' itemprop='url' title='शिक्षाशास्त्र / शिक्षणशास्त्र'>श&#2367;क&#2381;ष&#2366;श&#2366;स&#2381;त&#2381;र / श&#2367;क&#2381;षणश&#2366;स&#2381;त&#2381;र</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/education-management.html' itemprop='url' title='शैक्षिक प्रबंधन एवं प्रशासन'>श&#2376;क&#2381;ष&#2367;क प&#2381;रब&#2306;धन एव&#2306; प&#2381;रश&#2366;सन</a></li>
             <li itemprop='name'><a class='d-d-m-m' href='/p/areas-of-management.html' itemprop='url' title='प्रबंधन के क्षेत्र, श्रेणियां और कार्यान्वयन'>प&#2381;रब&#2306;धन क&#2375; क&#2381;ष&#2375;त&#2381;र, श&#2381;र&#2375;ण&#2367;य&#2366;&#2306; और क&#2366;र&#2381;य&#2366;न&#2381;वयन</a></li>
             <li itemprop='name'><a class='d-d-m-d' href='/p/education-method-system.html' itemprop='url' title='शिक्षा और शैक्षिक पध्द्तियाँ - शब्दकोश'>श&#2367;क&#2381;ष&#2366; और श&#2376;क&#2381;ष&#2367;क पध&#2381;द&#2381;त&#2367;य&#2366;&#2305; - शब&#2381;दक&#2379;श</a></li>
         </ul>
        </li>

        <li class='btn-group'>
          <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Genaral Awareness <span class='caret'/></a>
          <ul class='dropdown-menu'>          
                <li><a class='d-d-m-u' href='#' title='Current Affairs'>Current Affairs</a></li>
                <li><a class='d-d-m-m' href='#' title='General Knowledge'>General Knowledge</a></li>
                <li><a class='d-d-m-m' href='#' title='General Science'>General Science</a></li>
                <li><a class='d-d-m-d' href='#' title='Our Society'>Our Society</a></li>
            <li itemprop='name'><a class='d-d-m-d' href='/p/pramanpatra.html' itemprop='url' title='Certificate Verification'>Certificate Verification</a></li>
         </ul>
        </li>

        
      </ul>
     
    </div>
  </div>
</nav>

full-width

You may also read these articles