title: Vertical CSS Multi-Level Menu That Positions Itself at the Top of the div, not at the 1st Menu Option's Position
body: <p>Most CSS vertical menus have their second level and third layer menus popping out right beside the 1st level menu. This creates a space if you go to the third option in the first level menu. The second level menu from that third option is positioned only as high as the third menu first level item. Thus, there's a space above the second level menu, all the way up to the first level menu first selection.</p>
  
  <p>How would I go about making it so that the second level menu that pops out would be at the highest first level menu selection?</p>
  
  <p>I made a graphic to further iterate this.</p>
  
  <p><img src="https://i.stack.imgur.com/jMYbs.png" alt="enter image description here"></p>
  
  <p><a href="https://i.imgur.com/v1UIk.png" rel="nofollow noreferrer">http://i.imgur.com/v1UIk.png</a></p>
  
  <p><img src="https://i.stack.imgur.com/6My6r.png" alt="enter image description here"></p>
  
  <p><a href="https://i.imgur.com/weEwn.png" rel="nofollow noreferrer">http://i.imgur.com/weEwn.png</a></p>
  
  <p>In the first image, when you hover over Purchase, the menu pops out to the side. Instead, I want the menu to pop out above, at the Products area. I want it so that even if I go to Products, Purchase, Support, Downloads...etc, that second level menu ALWAYS pops out at the top of the menu/Products.</p>
  
  <p>In my actual menu, each level will only have four options, so there will be no issues hovering over and keeping the menu active.</p>
  
  <p>Does anyone have a link or an idea on how to get this done?</p>
  
  <p>Thanks - and I hope I explained it well..lol.</p>
  
  <p>EDIT:</p>
  
  <p>*I took this off of a website, I realize there's a ton of syntax errors like missing quotes and such. I'm just trying to get it to work before I fix anything and refine it.
  CSS</p>
  
  <pre><code>#menu ul { 
      margin: 0; 
      padding: 0; 
      list-style: none;
      width: 150px; /* Width of Menu Items */ 
      border-bottom: 1px solid #ccc; 
  } 
  
  #menu ul li { 
      position: relative; 
  } 
  
  #menu li ul { 
      position: absolute; 
      left: 149px; /*Set 1px less than menu width */ 
      top: 0; 
      display: block; 
  } 
  
  #menu li:hover ul {
      display: block; 
  } 
  
  #menu li:hover&gt;ul { 
      visibility:visible; 
  } 
  
  #menu ul ul {
      visibility:hidden; 
  } 
  
  /* Fix IE. Hide from IE Mac \*/ 
  * html #menu ul li { float: left; height: 1%; } 
  * html #menu ul li a { height: 1%; } 
  /* End */ 
  
  /* Make-up syles */ 
  
  #menu ul, li { 
      margin: 0 0 0 0; 
  } 
  
  /* Styles for Menu Items */ 
  #menu ul a { 
      display: block; 
      text-decoration: none; 
      color: #777; 
      background: #fff; /* IE6 Bug */ 
      padding: 5px; 
      border: 1px solid #ccc; 
      border-bottom: 0; 
  } 
  
  /* Hover Styles */ 
  #menu ul a:hover { 
      color: #E2144A; 
      background: #f9f9f9; 
  } 
  
  /* Sub Menu Styles */ 
  #menu li ul a { 
      text-decoration: none; 
      color: #77F; 
      background: #fff; /* IE6 Bug */ 
      padding: 5px; 
      border: 1px solid #ccc; 
      border-bottom: 0; 
  } 
  
  /* Sub Menu Hover Styles */ 
  #menu li ul a:hover { 
      color: #E2144A; 
      background: #f9f9f9; 
  } 
  
  /* Icon Styles */ 
  #menu ul a.submenu {background:#fff url("r_arrow.gif") no-repeat right; } 
  #menu ul a.submenu:hover {background:#f9f9f9 url("r_arrow.gif") no-repeat right;}
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;div id=menu&gt;
      &lt;ul id=menuList&gt;
          &lt;li&gt;&lt;a href="#" name="submenu" class="submenu"&gt;Products&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;CodeCharge&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;CodeCharge Studio&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;DemoCharge Studio&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" name="submenu" class="submenu"&gt;Comparison&lt;/a&gt;&lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;CodeCharge Studio&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;DemoCharge Studio&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;&lt;/li&gt; 
              &lt;/ul&gt;
          &lt;/li&gt; 
          &lt;li&gt;&lt;a href="#" name="submenu" class="submenu"&gt;Downloads&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;CodeCharge&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;CodeCharge Studio&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;DemoCharge Studio&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
          &lt;li&gt;&lt;a href="#" name="submenu" class="submenu"&gt;Support&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="http://support.yessoftware.com"&gt;Support&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="http://forums.codecharge.com"&gt;Forums&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="http://support.yessoftware.com/kb_search.asp"&gt;KB&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
          &lt;li&gt;&lt;a href="#" name="submenu" class="submenu"&gt;Purchase&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Resellers&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Affiliate&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
          &lt;li&gt;&lt;a href="#" name="submenu" class="submenu"&gt;Company&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Press Releases&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
      &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>IE Fix:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  startList = function() {
  
      // code for IE
      if(!document.body.currentStyle) return;
      var subs = document.getElementsByName('submenu');
      for(var i=0; i&lt;subs.length; i++) {
          var li = subs[i].parentNode;
          if(li &amp;&amp; li.lastChild.style) {
              li.onmouseover = function() {
                  this.lastChild.style.visibility = 'visible';
              }
              li.onmouseout = function() {
                  this.lastChild.style.visibility = 'hidden';
              }
          }
      }
  }
  window.onload=startList;
  &lt;/script&gt; 
  </code></pre>