title: CSS Horizontal Menu with 3nd Submenu Display Vertically
body: <p>This menu is a multi-level horizontal menu.  I am trying to make a 3nd level submenu to become vertical (1st &amp; 2nd level would stay as horizontal)</p>
  
  <p>So if I hover Products, it will list Harddrives, Monitors, and Speakers... horizontally. However, when I hover the Speakers, it now should list 10 Walt, 20 Walt... verticallly like a dropdown list.</p>
  
  <p>Can this be done?  Please help.</p>
  
  <pre><code>&lt;style&gt;
      /**
       * horizontal navigation (SO)
       */
      body {
          background: url('.jpg') 50% 50%;
      }
  
      /* Targeting both first and second level menus */
  
      #nav {position: relative;}
      #nav li {
          list-style:none;
          float: left;
      }
      #nav li a {
          display: block;
          padding: 8px 12px;
          text-decoration: none;
      }
      #nav li a:hover {
          background-color:red;
          color:#FFF;
          opacity:1;
      }
  
      /* Targeting the first level menu */
      #nav {  
          top:150px;
          min-width:850px;
          background:#fff;
          opacity:0.5;
          display: block;
          height: 34px;
          z-index: 100;
          position: absolute;
      }
      #nav &gt; li &gt; a {
      }
  
      /* Targeting the second level menu */
      #nav li ul {
          color: #333;
          display: none;
          position: absolute; 
          width:850px;
      }
      #nav li ul li {
          display: inline;
      }
      #nav li ul li a {
          background: #fff;
          border: none;
          line-height: 34px;
          margin: 0;
          padding: 0 8px 0 10px;
      }
      #nav li ul li a:hover {
          background-color:red;
          color:#FFF;
          opacity:1;
      }
  
      /* Third level menu */
      #nav li ul li ul{
          top: 0;
      }
      ul.child {
      background-color:#FFF;  
      }
      /* A class of current will be added via jQuery */
      #nav li.current &gt; a {
          background: #f7f7f7;
          float:left;
      }
      /* CSS fallback */
      #nav li:hover &gt; ul.child {
          left:0;
          top:34px;
          display:inline;
          position:absolute;
          text-align:left;
      }
      #nav li:hover &gt; ul.grandchild  {
          display:block;
      }
  
  &lt;/style&gt;
  
  
  &lt;!-- content to be placed inside &lt;body&gt;…&lt;/body&gt; --&gt;
  &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Products&lt;/a&gt;
          &lt;ul class="child"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Hard Drives&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Monitors&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Speakers&lt;/a&gt;
                  &lt;ul class="child"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;10 watt&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;20 watt&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;30 watt&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Random Equipment&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Services&lt;/a&gt;
          &lt;ul class="child"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Repairs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Installations&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Setups&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&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;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>jsFiddle Demo:</strong> <a href="http://jsfiddle.net/fJQ59/" rel="nofollow">http://jsfiddle.net/fJQ59/</a></p>