title: Why is this not outside of the nav Bar
body: <p>so I am pretty new to development and come across a problem, I think I am missing somthing but I can't tell. So I am building a nav bar and then a drop down menu. I believe that the li is in the ul so that why it is not coming out of it. So how could I fix this. If you know any website that would be good let me know thank you</p>
  <p>Code:
  <a href="https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111" rel="nofollow noreferrer">https://codepen.io/Giannilmgc/pen/JjrgZdr?editors=1111</a>
  Output:
  <a href="https://codepen.io/Giannilmgc/full/JjrgZdr" rel="nofollow noreferrer">https://codepen.io/Giannilmgc/full/JjrgZdr</a></p>
  <p><strong>To see what wrong keep your cursor over the to do tab and scroll down</strong></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-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&amp;display=swap");
  
  /* Here is the body style where we change the background */
  body {
    background: linear-gradient(135deg, #36454f 0%, #ffdd3c 100%);
    margin: 5px;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: white;
    border-radius: 50px;
  }
  
  li {
    float: left;
    width: 16.667%;
    transition-duration: 1s;
  }
  
  li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition-duration: 1s;
  }
  li:hover {
    background-color: black;
  }
  
  li a:hover {
    background-color: #36454f;
    color: white;
  }
  #homepageLink {
    background-color: #cccccc;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  ul li ul {
    display: none;
    position: absolute;
    background-color: #cccccc;
    width: 20%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 10;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {
    background-color: #36454f;
    color: white;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  
    &lt;title&gt; My Site &lt;/title&gt;
    &lt;link rel="stylesheet" href="CSS/Homepage-Css.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;body&gt;
  
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="../Homepage/HomePage.html" id="homepageLink"&gt;HomePage&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="../Journal-Page/Journal-Page.html"&gt;Journal&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="../Calander-Page/Calander-Page.html"&gt;Calander&lt;/a&gt; &lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="../Checklist-Page/Checklist-Page.html"&gt;To do&lt;/a&gt;
            &lt;ul class="dropdown-content"&gt;
              &lt;a herf="#"&gt;Latin&lt;/a&gt;
              &lt;a herf="#"&gt;Scince&lt;/a&gt;
              &lt;a herf="#"&gt;Ela&lt;/a&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="../Service-Page/Service-Page.html"&gt;Service&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="../Contact-Page/Contact-Page.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="time"&gt;
        &lt;span id="display_ct"&gt;&lt;/span&gt;
    &lt;/body&gt;
    &lt;!-- Adding Script to the bottom ... Very Imporantent  --&gt;
    &lt;script src="Javascript/Homepage-Java.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you</p>