Ok I stripped out almost everything else else except the menu and the code for my page and css are below. I have also included a couple screenshots that show whats happening. The only thing that changed between the 2 screenshot is that I added the <div class="centered"> just before the table.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript" src="scripts/liveMenu.js"></script>
<link rel="stylesheet" href="test1.css" type="text/css" media="screen" />
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/BlackBerry/i)) || (navigator.userAgent.match(/iPhone|iPad|iPod/i))) {
liveMenu.initOnLoad('siteMenu1', { effect: 'fade', showOn: 'click', duration: 400, mode: 'simultaneous',
beforeShow: function () {
this.opener.className = 'lm-selected-item';
},
beforeHide: function () {
this.opener.className = '';
}
});
} else {
liveMenu.initOnLoad('siteMenu1', { effect: 'fade', showOn: 'mouseenter', duration: 400, mode: 'simultaneous',
beforeShow: function () {
this.opener.className = 'lm-selected-item';
},
beforeHide: function () {
this.opener.className = '';
}
});
}
</script>
</head>
<body>
<div class="centered">
<table width="1050" cellpadding="0" cellspacing="0" border="1">
<tr><td colspan="3">Top Content</td></tr>
<tr height="225">
<td width="250" valign="top">
<div id="vertical-menu-container">
<ul id="siteMenu1" class="lm-vertical lm-menu">
<li><a href="#"><span class="lm-right-arrow"></span>Menu 1</a>
<ul class="lm-vertical lm-right lm-submenu">
<li><a href="test1.php">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#"><span class="lm-right-arrow"></span>Menu 2</a>
<ul class="lm-vertical lm-right lm-submenu">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="#"><span class="lm-right-arrow"></span>Menu 3</a>
<ul class="lm-vertical lm-right lm-submenu">
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
</ul>
</li>
<li><a href="#"><span class="lm-right-arrow"></span>Menu 4</a>
<ul class="lm-vertical lm-right lm-submenu">
<li><a href="#">Item 4.1</a></li>
<li><a href="#">Item 4.2</a></li>
</ul>
</li>
</ul>
</div>
<br style="clear: both" />
</td>
<td width="600" valign="top">Main Content</td>
<td width="200" bgcolor="#000066" align="center" valign="middle">
Right Side Content</td>
</tr>
</table>
</div>
<br /><br />
</body>
</html>
Code:
body { margin:0px; padding:0px; border:0px; align:center; background-color:#ffffff; }
a:hover{text-decoration:underline;}
#a:hover{text-decoration:none;}
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
#vertical-menu-container { position: relative; float: left; margin-top: 0px; width: 250px; }
#main-content { padding: 0px 0px 0 250px; }
.lm-menu {
list-style-type: none;
padding-left: 0px;
margin-left: 0px;
position: absolute;
left: 0px;
margin: 0px;
}
.lm-submenu {
display: none;
list-style-type: none;
position: relative;
margin: 0px;
padding-left: 0px;
}
.lm-container {
position: absolute;
top: 0px;
overflow: hidden;
visibility: hidden;
margin: 0px 0px 0px -20px;
padding: 0px;
}
.lm-menu li, .lm-submenu li {
/* Should be specified in order to prevent ie6 unpredictable behaviour */
width: 250px;
background: transparent url(bogus); /* url(bogus) is a fix for IE */
}
.lm-menu li a, .lm-submenu li a {
display: block;
}
.lm-up-arrow {
width: 11px; height: 8px;
background: transparent url("images/arrow_up.gif") no-repeat;
float: right;
margin-top: 5px;
}
.lm-right-arrow {
width: 8px; height: 11px;
background: transparent url("images/arrow_right.gif") no-repeat;
float: right;
margin-top: 5px;
}
.lm-down-arrow {
width: 11px; height: 8px;
background: transparent url("images/arrow_down.gif") no-repeat;
float: right;
margin-top: 5px;
}
.lm-left-arrow {
width: 8px; height: 11px;
background: transparent url("images/arrow_left.gif") no-repeat;
float: right;
margin-top: 5px;
}
.lm-menu li, .lm-submenu li {
padding: 0px;
cursor: pointer;
}
.lm-menu li { width: 250px; }
.lm-submenu li { width: 200px; }
.lm-menu li a {
height: 21px;
line-height: 21px; /* IE <8 need it */
font: bold 12px Verdana;
text-decoration: none;
display: block;
background: #000066;
color: #FFFFFF;
padding: 14px 10px 14px 10px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.lm-submenu li a {
height: 21px;
line-height: 21px; /* IE <8 need it */
font: 12px Verdana;
text-decoration: none;
display: block;
background: #000066;
color: #FFFFFF;
padding: 14px 10px 14px 10px;
border-bottom: 1px solid #778;
border-left: 2px ridge #0066CC;
}
.lm-menu li a:hover, .lm-submenu li a:hover {
background: #0066CC;
color: #FFFFFF;
}
li.lm-selected-item a {
background: #0066CC;
color: #FFFFFF;
}
Before you post, read our: 
