title: CSS/HTML: How to add a dropdown menu to existing navbar?
body: <p>Hey guys can anyone help me I need this dropdown menu in my existing navbar. The dropdown menu should be on the right hand site of the navbar. please!</p>
  
  <p>This is the html body part:</p>
  
  <pre><code>&lt;body&gt;
      &lt;ul class="topnav"&gt;
          &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="dropdown, right"&gt;
              &lt;a href="javascript:void(0)" class="dropbtn"&gt;Dropdown&lt;/a&gt;
              &lt;div class="dropdown-content"&gt;
                  &lt;a href="#"&gt;Link 1&lt;/a&gt;
                  &lt;a href="#"&gt;Link 2&lt;/a&gt;
                  &lt;a href="#"&gt;Link 3&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and this is my css code:</p>
  
  <pre><code>body {
      background-color: #D3D3D3; 
  }
  
  body {margin: 0;}
  
  ul.topnav {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  ul.topnav li a:hover:not(.active) {
      background-color: #D3D3D3;
      color: #000;
  }
  
  ul.topnav li a.active {
      background-color: #D2691E;
      color: white;
  }
  
  ul.topnav li.right {float: right;}
  
  @media screen and (max-width: 600px){
      ul.topnav,
      ul.topnav {position: unset}
      ul.topnav li.right, 
      ul.topnav li {float: none;}
  }
  </code></pre>