title: HTML Drop Down Menu
body: <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;div class="main-menu"&gt;
        &lt;ul class="menu-list"&gt;                                                  
            &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Drop Down&lt;/a&gt;&lt;/li&gt;                                
        &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm struggling to create a very basic drop down menu using list items. Could anyone please tell me how I'd go about creating a drop down menu to the below:</p>
  <pre><code>  &lt;div class=&quot;main-menu&quot;&gt;
        &lt;ul class=&quot;menu-list&quot;&gt;                                                  
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Four&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Drop Down&lt;/a&gt;&lt;/li&gt;                                
        &lt;/ul&gt;
  </code></pre>
  <p>I've no issues with CSS so styling shouldn't be a problem, but I', trying to achieve this without the use of Javascript.</p>