title: How to create a dropdown menu from a link in a navigation bar
body: <p>I'm trying to create a dropdown menu that drops down from a link in a navigation bar when hovered over.  I'm not sure how to hide the list of links in the dropdown and then have them appear when the proper link is hovered over.  Any help would be appreciated.</p>
  
  <p>My HTML thus far</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Dropdown Menu&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Products&lt;/a&gt; &lt;!-- link that creates dropdown menu --&gt;
                  &lt;ul class="dropdown"&gt;    &lt;!-- dropdown menu list --&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Engineering&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Technical&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Last&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS thus far</p>
  
  <pre><code>body {
      margin: 0;
  }
  nav {
      background-color: green;
  }
  
  a {
      text-decoration: none;
      color: white;
  }
  
  ul {
      list-style: none;
      text-align: center;
  }
  
  li {
      display: inline-block;
      padding-right: 10px;
  }
  
  a:hover {
      color: yellow;
  }
  
  .dropdown {
      display: none;
  }
  </code></pre>