I have a dropdown menu on my mobile compatible version of my site but the drop down item are off to the side when they show up after the original div has been hovered on. Here is what the problem looks like http://i55.tinypic.com/301q4ae.png how can I fix this?

Code:
<div id="wrap">
		<div id="head">
        <img src="images/head_home.png" width="47" height="50" alt="home" /><img src="images/head_title.png" width="205" height="50" alt="title" /><div class="navMenu">		
        <ul>
			<li class="outer"><a href="#"></a>
				<ul class="drop">
					<li class="inner"><a href="#">Item1</a></li>
					<li class="inner"><a href="#">Item2</a></li>
				</ul>
			</li>
		</ul>
        
        </div>
        </div><!--END HEAD-->

		<div id="content">
        	<p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas adipiscing purus vitae faucibus. Suspendisse potenti. Nunc turpis quam, porta ac mollis ut, dignissim at tortor. Vestibulum fringilla turpis a erat elementum eget sodales ipsum imperdiet. Duis ligula risus, consequat id commodo at, tincidunt eget erat. Mauris nec eros at magna dictum varius in at orci. In hac habitasse platea dictumst. Duis vel sagittis est. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sollicitudin sagittis nisi, nec scelerisque ligula pretium in. Nulla non dui nisi. Nulla tempor ante ac urna consequat eu gravida est scelerisque. Etiam sed porta massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consectetur condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Nam viverra, nisi nec porta volutpat, odio leo blandit mi, non sodales tortor sem auctor neque. Ut pharetra, ante in congue placerat, dui metus dapibus est, ut faucibus est ipsum id nulla. Nunc aliquam arcu a lorem imperdiet semper. 
            </p>
        </div><!--END CONTENT-->




	</div><!--END WRAP-->


Code:
#wrap {
	height:auto;
	width:300px;
	margin:0px;
	padding:0px;
}

#head {
	height:50px;
	width:300px;
}

.navMenu {
	background-image:url(images/head_menu.png);
	height:50px;
	width:48px;
	float:right;
	padding:0;
}

.navMenu ul {
	margin:0;
	padding:0;
	line-height:50px;
}

.navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color:transparent;
}

.outer {
}

.navMenu .inner {
	background-color:#73736b;
	font-family:Arial, Helvetica, sans-serif;
	line-height:30px;
	height:30px;
	width:81px;
	display:block;
}

.navMenu ul li a {
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	width:49px;
	height:50px;
	display:block;
	color:#ff9a29;
	padding-left:3px;
}

.navMenu ul ul {
	position:absolute;
	visibility:hidden;
	top:30px;
}

.navMenu ul li:hover ul {
	visibility:visible;
}

.navMenu li:hover {
	background-color:transparent;
}

.navMenu ul li:hover ul li a:hover {
	background:#ff9a29;
	color:#FFF;
	width:78px;
	height:30px;
	float:right;
	padding-left:3px;
}

.navMenu a:hover {
	color:#FFF;
}

.navMenu ul li:hover a {
	color:#fff;
}

.navMenu ul li:hover li a {
	color:#FFF;
} 


.clearFloat {
	clear:both;
	margin:0;
	padding:0;
}
Thanks
Thomas