title: During hover on parent element, show child (dropdown nav)
body: <p>I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items.  The way I decided to do it is just by putting the drop-down in a div tag.  This is easily changeable, i just don't like to go heavy on the html side.</p>
  
  <p>Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.</p>
  
  <p>Here's my js:</p>
  
  <pre><code>var dropdown = $('.dropdown');
  var parent = dropdown.parent();
  $(parent).hover(
      function () {
          dropdown.css('display', 'block');
      }
  );
  </code></pre>
  
  <p>Here's my css:</p>
  
  <pre><code>div.nav {
      text-align: center;
  }
  div.nav &gt; ul &gt; li {
      margin-top: 15px;
      text-align: center;
      font-size: 1.25em;
  }
  div.nav &gt; ul &gt; li {
      display: inline-block;
      list-style-type: none;
  }
  div.nav a {
      padding: 1em;
  }
  div.dropdown {
      display: none;
      background-color: black;
      position: absolute;
  }
  </code></pre>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="game.html"&gt;Sample Game&lt;/a&gt;
              &lt;div class="dropdown"&gt;
                  &lt;a href="index.html"&gt;About it&lt;/a&gt;
                  &lt;br&gt;
                  &lt;a href="index.html"&gt;Game&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="solutions.html"&gt;TP Solutions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>