title: Drop down feature is not working in bootstrap
body: <p>I have added a simple dropdown using the following code -:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;nav class="nav-menu d-none d-lg-block"&gt;
      &lt;ul&gt;
         &lt;li class="active"&gt;&lt;a href="#header"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
  
         &lt;li class="dropdown"&gt;&lt;a href="#"&gt;&lt;span&gt;Drop Down&lt;/span&gt; &lt;i class="bi bi-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
         &lt;ul&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Drop Down 1&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Drop Down 2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Drop Down 3&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;            
          &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And also added the following libraries :-</p>
  <pre><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;&gt;
   &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
   &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>But my dropdown is not working. It is showing all the options 1 after the other like this :-
  <a href="https://i.stack.imgur.com/lePWG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lePWG.png" alt="enter image description here" /></a></p>