Hi guys,

I am building a navigation button and on click the menu drops down. This functionality works, but I have the submenu's width at 100% - reason I did this is because this is going to be on a mobile site so I want the submenu to expand to fit the screen. This is not doing this and I'm unsure why. Maybe I have just been staring at this code for too long hah.
Also, when clicking on the menu button the button moves to the left when the submenu drops down.
Anyone know why this is?

And is there a way to add a button, centered at the bottom of the submenu labeled "close"? and then the user can click on button to close the menu. ?

Any help would be much appreciated.

Thanks.
Here is my code:

Code:
<style type="text/css">
ul, li{margin:0; border:0; padding:0; list-style:none;}
#mobilebar{
	font-size:11px;
	color:#FFF;
	padding:4px;
	height:30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #900;
}
.menu {
	float: right;	
}
#mobilebar .menu li {
	height:30px;
	float:left;
	margin-right:10px;
}
#mobilebar .menu li a{
	color:#FFF;
	text-decoration:none;
	padding:0 10px;
	height:30px;
	line-height:30px;
	display:block;
	float:left;
	padding:0 26px 0 10px;

}
#mobilebar .menu li a:hover{
color:#;
}
#mobilebar .menu li a:active{
color:#FFF;
background-color: #000;

}



/* CSS for Submenu */
#mobilebar ul .submenu {
	position:relative;
	top:4px;
	width:100%;
	padding:6px 0;
	clear:both;
	z-index:2;
	display:none;
	background-color: #FFFFFF;
	border-bottom-width: 10px;
	border-top-style: none;
	border-bottom-style: solid;
	border-bottom-color: #9f010c;
}
#mobilebar ul .submenu li{
	background:none;
	display:block;
	float:none;
	margin:0 6px;
	border:0;
	height:auto;
	line-height:normal;
	border-top:dashed 1px #DEDEDE;
}
#mobilebar .submenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#mobilebar .submenu li a:hover{
background:#e3edef;
}
img {
	width: 100%;
}
</style>

<script type="text/javascript">
function showlayer(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else { 
myLayer.style.display="none";
}
}

</script>
<div id="mobilebar">
<ul class="menu">

<li><a href="#" onclick="javascript:showlayer('sm_1')"><img src="img/global/menu.png"></a></li>

<ul class="submenu" id="sm_1">
<li><a href="p1.html">Products</a></li>
<li><a href="p2.hmtl">Styles</a></li>
<li><a href="p3.hmtl">Overview</a></li>
<li><a href="p4.hmtl">My Accounts</a></li>
<li><a href="p5.hmtl">Help & Support</a></li>
<li><a href="p6.hmtl">Professional Class</a></li>
<li><a href="p7.hmtl">Mobile Apps</a></li>
<li><a href="p8.hmtl">Designs & Tutorials</a></li>
<li><a href="p9.hmtl">Espanol</a></li>
<li><a href="p9.hmtl">Current customers, please visit</a></li>
</ul>

</ul>
</div>