title: Create vertical submenu for horizontal menu
body: <p>I've spent more time trying to do this than I'm willing to admit.  I just can't seem to figure this out.  I'm trying to build something which I believe is very simple.  I've got a horizontal menu.  And I want to have the submenu be vertical when someone hovers over a given link.  </p>
  
  <p>This is what I've got right now at <a href="http://retirephoenizarizona.com/" rel="nofollow" title="RetirePhoenizArizona.com">RetirePhoenixArizona.com</a>:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="secondary-navigation"&gt;
      &lt;div class="container"&gt;
          &lt;ul id="secondary-menu"&gt;
                  &lt;li&gt;&lt;a href="google.com"&gt;Link 1&lt;/a&gt;
                          &lt;ul class="secondary-submenu"&gt;
                              &lt;li&gt;&lt;a href="http://www.google.com"&gt;Sub Menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="http://www.google.com"&gt;Sub Menu 2&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="facebook.com"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="google.com"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="facebook.com"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#secondary-menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
  }
  
  #secondary-menu li {
      float: left;
      width: 25%;
  }
  
  #secondary-menu li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  #secondary-menu li a:hover {
      background-color: #111;
  }
  
  #secondary-menu ul {
    display: none;
  }
  
  #secondary-menu li:hover &gt; ul {
    position: relative;
    display: inline;
    width: 200px;
    height: 45px;
    position: absolute;
    margin: 40px 0 0 0;
  }
  
  #secondary-menu li:hover &gt; ul li {
    float: none;
    width: 100%;
  }
  </code></pre>