title: how can i make drop down menu for this items without them glitching or getting in the way of something
body: <p>Hi all my question is how can i add the assignment pages ass drop down menu for the Actual assignment button.In my css code.I want them to appear downwards the assignment button and not to glitch and change the order of the other buttons i would appriciate the help.</p>
  
  <pre><code>    &lt;body id="page3"&gt;                                         
  &lt;header&gt;
      &lt;div class="main"&gt;
          &lt;div class="logo"&gt; 
              &lt;img src="../logo.png"&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li class=""&gt;&lt;a href="smth.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="cont.html"&gt;Contact me&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Assignments&lt;/a&gt;
                  &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Assignment Week1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Assignment Week1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Assignment Week1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Assignment Week1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Assignment Week1&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="title"&gt;
          &lt;h1&gt;Assignments&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>ul{
      float:left;
      list-style-type: none;
      margin-top:10px;
  }
  ul li{
      display:inline-flex;
  }
  ul li a{
      text-decoration:none;
      color:black;
      padding:20px 25px;
      border:1px solid transparent;  
      transition:0.8s ease;
  }
  ul li a:hover{
  background-color: white;
  color:black;
  }
  ul li.active a{
      background-color: white;
  color:black;
  }
  </code></pre>