title: Creating a dropdown list item menu with CSS only
body: <p>In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio section, a drop down appears allowing you to choose between two other sections, "Writing Samples" and "Photoshop." I am trying to accomplish this using only CSS.</p>
  
  <p>This is my HTML section:</p>
  
  <pre><code>&lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="index.html" &gt;About&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="subNav"&gt;
                      &lt;a class="selected" &gt;Portfolio&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="writing_samples.html"&gt;Writing Samples&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="photoshop.html"&gt;Photoshop&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>nav {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 0;
  } 
  
  nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  }
  
  nav li {
  display: inline-block;
  }
  
  nav a {
  font-weight: 800;
  padding: 15px 10px;
  }
  
  nav ul li.subNav ul {
  display: none;
  } 
  
  nav ul li.subNav:hover ul {
  display: block;
  }
  </code></pre>
  
  <p>I have reached the point that when I hover over the Portfolio list item, you see the resulting list items "Writing Samples" and "Photoshop", except that it displays these two items as a part of the original unordered list, and moves the "Portfolio" list item above the rest of the items. I would like "Writing Samples" and "Photoshop" to appear vertically under "Portfolio", but I can't quite figure this out with CSS. </p>