Strange Floating Block (Toolbox Theme)

I have a dropdown menu, which usually looks like this (forgive the crude sketching):
________ _________
|Details    | Website |
|________|_________|
|About     |
|_______|
|Other     |
|_______|

But when I center the menu on the page, these extensions of the submenu items appear out of nowhere and I can’t figure out how to get them to go away. They make the menu look like this:
                   ________ _________
                   |Details   | Website   |
_________|________|_________|
|                 |About       |
|                 |________|
|                 |Other      |
|_________|_______|

The website is here: http://calijenaephotography.com/blog.

Here’s the menu coding:

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #79868c;
	display: block;
	margin: 0 auto 1em 25px;
	float: left;
	width: 950px;
	font-family: Trebuchet MS, sans-serif;
	font-size: 110%;
 }

#access ul {
	list-style: none;
	margin: 0;
	padding-left: 200px;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	display: block;
	line-height: 2em;
	padding: 0 1em;
	color: #e0c351;
	text-decoration: none;
}
#access a:hover {
	color: #c8a518;
}
#access ul ul {
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: -200px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #dedede;
	line-height: 1em;
	padding: .5em .5em .5em 1em;
	width: 10em;
	height: auto;
	color: #c8a518;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #dedede;
}
#access ul ul a:hover {
	background: #cecece;
}
#access ul li:hover > ul {
	display: block;
}