Drop down menu hover issues - css

Question

I am about read to pull my hair out! Whenever you over over the dropdown navigational menu, the hover image drops below where it should be and stretches. Then the dropdown area disappears when you try to mouse to it. You can see this in action at http://pauldrayton.com/sites/waterdamagesegeorgia/. I've tried playing with the z-index to see if that could be the issue, but I have yet to figure it out!
Here's the CSS. Any help would be appreciated.
#access {
display: block;
float: left;
margin: 0 ;
margin-right:24px;
margin-top:-30px;
border-bottom: 2px solid #CCC ;
width: 990px;
z-index: 100;
}
#access .menu-header,
div.menu {
font-size: 14px;
margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
float:right;
position:relative;
margin: 0 0;
margin-right:24px;
}
#access .menu-header ul.sub-menu li {
box-shadow: 3px 3px 3px #999;
-moz-box-shadow: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999; }
#access .menu-header li,
div.menu li {
float: right;
position: relative;
padding:0px;
background:url(images/mantra_menu.png) top left no-repeat;
height: 27px;
margin-right:10px;
z-index: 101;
}
#access li.current_page_item {
background:url(images/mantra_menu_current.png) top left no-repeat;
border-bottom:none;
}
#access li.current-menu-item {
background:url(images/mantra_menu_current.png) top left no-repeat;
border-bottom:none;
}
#access a {
color: #FFFFFF;
display: block;
height: 27px;
margin-left:10px;
padding-right: 10px;
padding-top:4px;
padding-right:25px;
text-decoration: none;
font-weight:normal !important;
background:url(images/mantra_menu.png) top right no-repeat;
position:relative;
right:-10px;
z-index: 102;
white-space:nowrap;
}
#access .menu-header li:hover,
div.menu li:hover, #access a:hover {
color:#0C85CD ;
}
#access ul ul {
display: none;
position: absolute;
top: 29px;
right: 0px important;
float: right;
z-index: 104;
background:url(images/mantra_menu_down.png) 0px 0px no-repeat;
padding:12px 0px 0px;
/*border-bottom:1px solid #CCC;*/
margin-top:-30px;
}
#access ul ul li {
display:block !important;
background:#FFF !important;
/* border-left:1px solid #CCC;
border-right:1px solid #CCC;*/
margin-left:0 !important;
margin-right:0px !important;
/*padding-left:10px;
padding-right:10px;*/ /* disabled for submenu width fix */
padding-top:6px;
z-index: 105;
}
#access ul { }
#access ul li { }
#access ul li ul {
display: none; /* submenu width fix */ }
#access ul ul li { /* level 2 */
border: 0;
width: 100%; /* submenu width fix */
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
white-space: pre;
}
#access ul ul ul li { /* level 3 */
border: 0;
/* width: 100%;*/
width: auto;
display: block;
float: none;
border-top: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
white-space: pre; /* submenu width fix */
z-index: 106;}
#access ul ul a { display: block; padding: 3px 20px 0 10px !important;
/* submenu width fix */ }
#access ul ul a, #access ul ul ul a {
margin:0 !important;/*padding:0 !important;*/
left:0 !important;
color:#5F5B5B;
border-bottom:none;
background:none !important;
}
#access ul ul li:hover, #access ul ul ul li:hover {
background:#FCFCFC !important;
}
#access ul ul ul {
left: 100%;
top: 0;
background:url(images/mantra_menu_right.png) 0px 0px no-repeat;
padding:0px 0px 0px 12px;
z-index: 107;
/*border:1px solid #CCC;*/
}
#access li:hover > a {
color:#0E85CD ;
}
#access ul ul :hover > a {
color:#0E85CD;
}
#access ul li:hover > ul {
display: block;
z-index: 108;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-item > a{
color: #000 !important;
background:url(images/mantra_menu_current.png) top right no-repeat;
}
#access ul ul li.current_page_item ,
#access ul ul li.current-menu-ancestor,
#access ul ul li.current-menu-item ,
#access ul ul li.current-menu-parent {
color: #000 !important;
background:#FFF !important;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #5F5B5B ;
background:url(images/mantra_menu_current.png) top right no-repeat;
}

Answer 1

I made the following changes:
#menu-main-navigational {
position:relative;
}
#access .menu-header ul {
position:absolute;
}
and it worked for me

Answer 2

Give the .sub-menu element a position of absolute instead of relative. The relative causes it to force its parent element to expand. You will also need to give it a fixed width as it will no longer resize to its parent. And edit out any rules that override that property on the element.