Hey guys,

Thanks in advance for any answers! Hoping for a little help here. I'm fairly amateur when it comes to CSS but I managed to put a navigation menu onto my current website as you can see here:
adamsinteriors.us/indextest.php


As you can see under "Living Room" & "Occasionals" the submenu isn't appearing in the right spot on mouseover. It should be flush to the right of the the navigation link.

Just in case here is the CSS if you guys need it:

a:link {color:teal;text-decoration:none;}
a:visited {color:teal;text-decoration:none;}
a:hover {color:teal;text-decoration:none;}
a:active {color:teal;text-decoration:none;}





* {
margin: 0px;
padding: 0px;
}

body {
background: #eee;
}

nav {

font-family: Calibri;
line-height: 2.5;
margin: 0px auto; /*for display only*/
width: 200px;
-webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}

.menu-item {
background: #fff;
width: 200px;
}



/*Menu Header Styles*/
.menu-item h4 {
color: #fff;
font-size: 11px;
text-align:center;
letter-spacing:1px;
font-weight: 500;
padding: 7px 12px;
background: #ffffff;
}

.menu-item h4 a {
color: white;
letter-spacing:2px;
background: linear-gradient(top, #ff002c 0%,#6d0019 100%); /* W3C */
filter: progidXImageTransf display: block;
text-decoration: none;
width: 170px;
}


/*Menu Header Styles*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.1);
border-top: 1px solid rgba(255,255,255,0.2);
color: #000;
font-size: 11px;
font-weight: 500;
padding: 7px 12px;

/*Gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #ff002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff002c 0%,#6d0019 100%); /* IE10+ */
orm.Microsoft.gradient( startColorstr='#ff002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

/*First Item Styles*/
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}

/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 23px;
position:relative;
left2: 200px;
list-style-type: none;
overflow2: hidden;
padding:0px;
}

.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: teal;
display: block;
width: 200px;
}

/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}

.menu-item li:hover {
background: #eee;
}


/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 23px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow2: hidden;
padding: 0px;
}

/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 23px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;

/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}

.menu-item:hover ul {
height: 293px;
}






.menu-item ul {
list-style-type: none;
margin-top: 0;
padding: 0;

}




.menu-item2 ul li {
width: 400px;
position: relative;
float:right;



}
.menu-item ul ul {
position: absolute;
left: 150px;
width:200px;
z-index: 9999;
top: 0;
}

.menu-item ul ul {
display: none;
}
.menu-item ul li:hover ul {
display: block;
}


.menu-item a {
display: inline-block; /* 'block' causes gaps in IE6 */
width: 200px; /* for IE6 */

}








Thanks guys!