CSS Sub-Menu Positioning

The website I am working on is at:

http://mccormickscchamber.com/navigation20.php?silverheader=2

I am trying to position the long sub menus to align to the top of “The Chamber” image.

For example, the services submenu is currently set to (top:0;):

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

If I change it to; bottom:0; then the submenu moves up (the last submenu item is aligned with services). However, now it is too high.

I played with everything I could think of and just screwed it up every time it is changed.

Thanks in advance expertd!

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 250px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
	background-color: #d1e2d1;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}


/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }


HTML:

<div id="sideNav">
  <div id="sideNavWrapper">
    <div class="applemenu">
      <div class="suckerdiv">

        <div class="silverheader"><a href="#">The Chamber</a></div>
          <div class="submenu">
			<?php include_once "/home2/mccormi9/public_html/_includes/navArea01.php"; ?>
		  </div><!--end submenu-->     

        <div class="silverheader"><a href="#">County Information</a></div>
          <div class="submenu">
			<?php include_once "/home2/mccormi9/public_html/_includes/navArea02.php"; ?>
  		  </div><!--end submenu-->   
          
        <div class="silverheader"><a href="#">County Lifestyle</a></div>
          <div class="submenu">

            <ul class="suckertree3">
              <li><a href="#">Art</a></li>
              <li><a href="#">Attractions</a></li>
              <li><a href="#">Civic Organizations</a>          
                <ul>
                  <li><a href="#">Clubs</a></li>
                  <li><a href="#">Churches</a></li>   
                </ul>
              </li>
              <li><a href="#">Dining</a></li>
              <li><a href="#">Historic Places</a></li>
              <li><a href="#">Lodging</a></li>
              <li><a href="#">Shopping</a>          
                <ul>
                  <li><a href="#">Antiques</a></li>
                  <li><a href="#">Retail</a></li>   
                </ul>
              </li>
              <li><a href="#">Outdoor Recreation</a>
                <ul>
                  <li><a href="#">Biking</a></li>
                  <li><a href="#">Camping</a></li>   
                  <li><a href="#">Fishing</a></li>    
                  <li><a href="#">Golf</a></li>
                  <li><a href="#">Hiking Trails</a></li>   
                  <li><a href="#">Hunting/Hunt Camps</a></li> 
                  <li><a href="#">Lakes-Marinas/Boating</a></li>
                  <li><a href="#">State Parks</a></li>
                </ul>
              </li>
              <li><a href="#">Services</a>
                <ul>
                  <li><a href="#">Attornies</a></li>
                  <li><a href="#">Automotive</a></li>   
                  <li><a href="#">Builders</a></li>    
                  <li><a href="#">Building Repairs</a></li>
                  <li><a href="#">Financial</a></li>   
                  <li><a href="#">Insurance</a></li> 
                  <li><a href="#">Industrial</a></li>
                  <li><a href="#">Medical</a></li>
                  <li><a href="#">Real Estate</a></li>
                  <li><a href="#">Schools</a></li>   
                  <li><a href="#">Manufacturing</a></li>    
                  <li><a href="#">Utilities</a></li>
                  <li><a href="#">Other</a></li>   
                  <li><a href="#">Hunting/Hunt Camps</a></li>
              </ul><!--end services-->
            </li><!--end services-->
            </ul><!--end sukertree2-->


		  </div><!--end submenu-->
      </div><!--end sukerdiv-->
    </div><!--end applemenu-->
  </div><!--end sideNavWrapper-->
</div><!--end sideNav-->

Select allOpen in new window