CSS problems with the Sub menu on my site

Question

I am having some problems with the Sub menu on my site... www.fastfoodforum.co.uk

If you hover over the "forums" item then you will see that the other content of my site jumps, and you will also see small gaps between each sub menu item.

Both of these are very much undesired and I would really appreciate any help in fixing them. I will post the CSS I currently have below, I have been experimenting and trying to fix this for some time so please excuse any messy/dodgy code.

Thanks everyone, really appreciate the help.

#access {
    float: left;
    margin: 91px 0 0 0px;
    width: 550px;
    display: block;
}
#access .menu-header, div.menu {
    font-size: 13px;
    margin-left: 12px;
    width: 928px;
}
#access .menu-header ul, div.menu ul {
    list-style: none;
    margin: 0;
}
#access .menu-header li, div.menu li {
    float: left;
    margin: 0;
    padding: 9px 17px 0 0;
    position: relative;
}
#access a {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-decoration: none;
}
#access ul ul {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    float: left;
    width: 80px;
    z-index: 99999;
    padding-top: 0px;
}
#access ul ul li {
    min-width: 80px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#access ul ul ul {
    left: 100%;
    top: 0;
    padding-top: 0px;
}
#access ul ul a {
    background: #333;
    line-height: 1em;
    padding: 8px;
    width: 80px;
    height: auto;
    display: inline-table;
}
#access li:hover > a, #access ul ul :hover > a {
    color: #fff;
}
#access ul li:hover > ul {
    display: inline-table;
    position: relative;
}
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
    color: #fff;
}
* 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: #fff;
}

Answer 1

Try to change this:

#access ul li:hover > ul {
    display: inline-table;
    position: relative;
}

to this:

#access ul li:hover > ul {
    display: block;
}