title: Trouble understanding navbar dropdown menu
body: <p>I'm trying to make a nav bar I found on CodePen, but the problem is it doesn't have a dropdown menu. I know how to make a dropdown menu, but don't know how to position and style it as of now. I'm still fairly new to CSS.</p>
  <p>Any help is very much appreciated, thank you!</p>
  <p><em>If the code is not responsive, here's the original.</em>
  <a href="https://codepen.io/WebDevSimplified/pen/LqKQRK" rel="nofollow noreferrer">https://codepen.io/WebDevSimplified/pen/LqKQRK</a></p>
  <pre><code>&lt;nav class=&quot;navbar&quot;&gt;
    &lt;a div class=&quot;brand-title&quot; href=&quot;submissions.html&quot;&gt;AESTHETIC PRESS&lt;/a&gt;&lt;/div&gt; 
    
    &lt;a href=&quot;#&quot; class=&quot;toggle-button&quot;&gt;
      &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;bar&quot;&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;div class=&quot;navbar-links&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt; Books&lt;/a&gt;&lt;/li&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Young Adult&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Adult&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Non-Fiction&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Author&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
   &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;&quot;&gt;Our Team&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
    
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;News&lt;/a&gt;&lt;/li&gt;
     
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact Us &lt;i class=&quot;fa-solid fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;ul&gt;   
        &lt;li&gt;&lt;a href=&quot;submissions.html&quot;&gt;Submissions&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;&quot;&gt;Permissions&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;&quot;&gt;Translation&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;&quot;&gt;Press&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;&quot;&gt;Hiring&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  <pre><code>.navbar {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    height: 100px;
  }
  
  .brand-title {
    text-decoration: none;
    color: white;
    font-size: 2.0rem;
    margin: 1.5rem;
    cursor: pointer;
  }
  
  .brand-title:hover {
    color: white;
  }
  .navbar-links {
    
    padding: 0px;
    
    margin-right: 35%;
    border: red dotted 3px;
  }
  
  .navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  .navbar-links li {
    list-style: none;
  }
  
  
  .navbar-links li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 1rem;
  }
  
  .navbar-links li:hover {
    background-color: #555;
  }
  
  .toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
  }
  
  .toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
  }
  
  @media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
  
    .toggle-button {
        display: flex;
    }
  
    .navbar-links {
        display: none;
        width: 100%;
    }
  
    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }
  
    .navbar-links ul li {
        text-align: center;
    }
  
    .navbar-links ul li a {
        padding: .5rem 1rem;
    }
  
    .navbar-links.active {
        display: flex;
    }
  }
  
  </code></pre>