skip this to get to the issue I'm having ------>
I have this drop down menu that uses two transparent PNG's for the background of the drop down menu. Since they have alpha channels I applied some workarounds to make them work with IE5 and 6. This made it so that the links weren't working. So to fix that I made sure that no positioning was applied to any ul or li except for the links themselves. that means that the position for the drop down list is applied to the containing div.

The issue I'm having ------>
Long story short. My drop down has one problem now. when you scroll over the first set of links the related links drop down but push the menu over to the right. I can't seem to figure out how to make them stay put.

too see it go here http://www.avdes.com/tests/dropdown.html

or see the basic code here:

CSS:
Code:
#header {
    position: relative;
    width: 100%;
    height: 108px;
    width: 950px;
    padding: 0;
    margin: 0;
   font-family: Verdana, Arial;
    font-size: 8.5pt;
    letter-spacing: 1pt;
    float: left;
    top: 0px;
    left: 0px;
    }

/* header link styles */

#header a:link {
    color: #C9F3FB; /* Pale Blue */
    }
#header a:visited, #header a:active { 
    color: #C9F3FB;
    }
#header a:hover {
    color: #49DDFD; /* Bright Blue */
    }

#dropNavi {
    position: absolute;
    top: 76px;
    left: 200px;
    z-index: +1;
    }
#dropNavi ul {
    padding: 0;
    margin: 0;
    float: left;
    }
/* needed for IE7 */
#dropNavi a {
    display: block;
    width: auto;
    }

/* lines up the list horizontally */
#dropNavi li {
    float: left;
    width: auto;
    padding-right: 5px;
    list-style: none;
    }

/* navigation revealed */
#dropNavi li ul {
    display: none;
    left: -999em;
    height: auto;
    /*border: 1px #0099cc solid;*/
    margin: 0;
    padding-top: 8px;
    padding-bottom: 15px;
    }

/* controlls the links inside the drop box */
#dropNavi li ul a {
    position: relative;
    z-index: 15;
    }

/* sets  the dimentions for the drop down box */
#dropNavi li li {
    width: 182px;
    padding-left: 12px;
    padding-top: 6px;
    }

/* creats a roll over for the links
#dropNavi li:hover, 
#dropNavi li.sfhover {
    background: #eda;
    }
*/

/* Settings for drop6 class */
#dropNavi li:hover ul.drop6, 
#dropNavi li.sfhover ul.drop6 {
    display: block; /* wont show up without this */
    top: 12px;
    left: auto;
    background: url(http://www.avdes.com/tests/drop_6.png) top no-repeat;
    }
    
/* Settings for all else */
#dropNavi li:hover ul,
#dropNavi li.sfhover ul {
    display: block; /* wont show up without this */
    top: 12px;
    left: auto;
    background: url(http://www.avdes.com/tests/drop_4.png) top no-repeat;
    width: 182px;
    /*background: #000000;*/
    }
HTML:
Code:
<div id="header">
                <img class="header" src="http://www.avdes.com/tests/header.png" alt="header" />
<div id="dropNavi">
                    <ul>
                        <li><a href="#">Home</a></li>
                                
                        <li>&middot;</li>
                                
                        <li><a href="#">Overview</a>
                            <ul>
                                <li>
                                    <a href="#">eLearning</a>
                                </li>
                                        
                                <li>
                                    <a href="#">Webcasting</a>
                                </li>
                                        
                                <li>
                                    <a href="#">Documents</a>
                                </li>
                                        
                                <li>
                                    <a href="#">eSales</a>
                                </li>        
                            </ul>
                        </li>
                                
                        <li>&middot;</li>    
                                
                        <li><a href="#">How It Works</a></li>
                            
                        <li>&middot;</li>
                                
                        <li><a href="#">Solutions</a>
                            <ul class="drop6">                                                    
                                <li>
                                    <a href="#">Train Your Employees</a>
                                </li>
                                            
                                <li>
                                    <a href="#">Train Your New Hires</a>
                                </li>
                                    
                                <li>
                                    <a href="#">Train Your Sales Reps</a>
                                </li>
                                    
                                <li>
                                    <a href="#">Train Your Customers</a>
                                </li>
                            
                                <li>
                                    <a href="#">Sell Your Training</a>
                                </li>
                                
                                <li>
                                    <a href="#">Compliance</a>
                                </li>                            
                            </ul>
                        </li>
                        
                        <li>&middot;</li>
                        
                        <li><a href="#">Your Industry</a>
                            <ul>
                                <li>
                                    <a href="#">Government</a>
                                </li>
                                
                                <li>
                                    <a href="#">Medical</a>
                                </li>
                                                    
                                <li>
                                    <a href="#">Retail</a>
                                </li>
                                                                            
                                <li>
                                    <a href="#">Software</a>
                                </li>                    
                            </ul>
                        </li>
                                
                        <li>&middot;</li>
                                
                        <li><a href="#">Features</a></li>
                                
                        <li>&middot;</li>
                                
                        <li><a href="#">Implementation</a></li>
                        
                        <li>&middot;</li>
                        
                        <li><a href="#">Customers</a></li>
                    </ul>
                </div>
            </div>