Vertical CSS Multi-Level Menu That Positions Itself at the Top of the div, not at the 1st Menu Option's Position

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.

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?

I made a graphic to further iterate this.

http://i.imgur.com/v1UIk.png

http://i.imgur.com/weEwn.png

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.

In my actual menu, each level will only have four options, so there will be no issues hovering over and keeping the menu active.

Does anyone have a link or an idea on how to get this done?

Thanks - and I hope I explained it well..lol.

EDIT:

*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

#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>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;}

html:

    <div id=menu>
    <ul id=menuList>
        <li><a href="#" name="submenu" class="submenu">Pr开发者_如何学Coducts</a>
            <ul>
                <li><a href="#">All</a></li> 
                <li><a href="#">CodeCharge</a></li> 
                <li><a href="#">CodeCharge Studio</a></li> 
                <li><a href="#">DemoCharge Studio</a></li>
                    <li><a href="#" name="submenu" class="submenu">Comparison</a><ul>
                        <li><a href="#">CodeCharge Studio</a></li> 
                        <li><a href="#">DemoCharge Studio</a></li>
                    </ul></li> 
            </ul>
        </li> 
        <li><a href="#" name="submenu" class="submenu">Downloads</a>
            <ul>
                <li><a href="#">CodeCharge</a></li> 
                <li><a href="#">CodeCharge Studio</a></li> 
                <li><a href="#">DemoCharge Studio</a></li>
            </ul>
        </li> 
        <li><a href="#" name="submenu" class="submenu">Support</a>
            <ul>
                <li><a href="http://support.yessoftware.com">Support</a></li> 
                <li><a href="http://forums.codecharge.com">Forums</a></li> 
                <li><a href="http://support.yessoftware.com/kb_search.asp">KB</a></li>
            </ul>
        </li> 
        <li><a href="#" name="submenu" class="submenu">Purchase</a>
            <ul>
                <li><a href="#">Store</a></li> 
                <li><a href="#">Resellers</a></li> 
                <li><a href="#">Affiliate</a></li>
            </ul>
        </li> 
        <li><a href="#" name="submenu" class="submenu">Company</a>
            <ul>
                <li><a href="#">About Us</a></li> 
                <li><a href="#">Contact Us</a></li> 
                <li><a href="#">Press Releases</a></li>
            </ul>
        </li> 
    </ul>
</div> 

IE Fix:

<script type="text/javascript"> 
startList = function() {

    // code for IE
    if(!document.body.currentStyle) return;
    var subs = document.getElementsByName('submenu');
    for(var i=0; i<subs.length; i++) {
        var li = subs[i].parentNode;
        if(li && li.lastChild.style) {
            li.onmouseover = function() {
                this.lastChild.style.visibility = 'visible';
            }
            li.onmouseout = function() {
                this.lastChild.style.visibility = 'hidden';
            }
        }
    }
}
window.onload=startList;
</script> 

In your CSS, change #menu ul to position: relative:

#menu ul
{ 
    margin: 0; 
    padding: 0; 
    position: relative;
    list-style: none;
    width: 150px; /* Width of Menu Items */ 
    border-bottom: 1px solid #ccc; 
} 

And remove the relative positioning from #menu ul li:

#menu ul li
{ 
    /*position: relative;*/
} 

This makes it a little difficult to get over to the subitems, though.

Here's a demo: http://jsfiddle.net/KvaTC/

If you give each ul that is a submenu an id, then you can specify in CSS for that ID a negative top value of whatever is necessary for each one. I would recommend setting a height value for the li tags concerned for two reasons, it will tell every browser to render them at the same height and you can calculate the negatives required - no javascript required to do this.

So, take out the top:0 in the following code block so it is like this:

#menu li ul { 
  position: absolute; 
  left: 149px; /*Set 1px less than menu width */ 
  display: block; 
}

Then set a height for each li concerned:

#menu ul li { 
  position: relative; 
  height:30px;
} 

Then for each submenu ul give an id (I show the first one as an example):

<ul id=menuList>
    <li><a href="#" name="submenu" class="submenu">Products</a>
        <ul id="submenu1">
            <li><a href="#">All</a></li> 
            <li><a href="#">CodeCharge</a></li> 
            <li><a href="#">CodeCharge Studio</a></li> 
            <li><a href="#">DemoCharge Studio</a></li>
                <li><a href="#" name="submenu" class="submenu">Comparison</a><ul>
                    <li><a href="#">CodeCharge Studio</a></li> 
                    <li><a href="#">DemoCharge Studio</a></li>
                </ul></li> 
        </ul>
    </li> 

Then the CSS:

#submenu1 {
  top:0px;
}

Each subsequent id would then need negative values for whatever is required for them to be at the top. so for the second, now they have a definite height of 30px would be:

#submenu2 {
  top:-30px;
}

JSFiddle: http://jsfiddle.net/Psyrus/C3xqX/