Dropdown menu is offset in browser

I have a horizontal menu with vertical a vertical dropdown for a submenu. The submenu is shifted to the left in Safari and Firefox and to the right in Explorer.

I can't figure out why!

Here's the code for the css:

/*Main Menu Area location*/
ul#navmenu {
float: right;
margin-top : 50px;
  margin-left : 0px;  
  margin-right : 20px;  
	cursor: default;
	list-style-type: none;

}


/*Main Menu Look*/
ul#navmenu a { 
  display : inline;
    font : 14px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    font-weight: bold;
    text-align:center;
  background-color : #FFFFFF; /* Color behind words */
  padding : 2px 10px 2px 10px; /* Top/right/bottom/left */
  text-decoration : none;
  color : #494036; /* color of text */
  cursor : pointer; /* ADDED THIS (Needed for Opera due to selected styling) */
  	border-right: 1px solid #000000;
}



ul#navmenu li {
	display: inline;
  padding : 0px 0px 0px 0px; /* Top/right/bottom/left */
}

* html ul#navmenu li {
	display: inline;
  padding : 0px 0px 0px 0px; /* Top/right/bottom/left */
}

/* Submenu box area setup */
ul#navmenu li ul{
	display: none;
	margin-top: 0px;
    margin-right : 0px;
	border-left: 1px solid #000000;
  	border-bottom: 1px solid #000000;

	padding : 0px 0px 0px 0px; /* Top/left/bottom/right */

}

ul#navmenu li ul li {
display:block;

}

ul#navmenu li:hover ul{/* Submenu location */
 position: absolute;
 display:block;

}

ul#navmenu li ul a {/* Submenu text setup */

    background-color : #FFFFFF; /* Color behind words */
	padding : 2px 14px 2px 14px;  /* Top/left/bottom/right-space between submenu words and side lines */
    color : #624931; /* color of text */

    font : 12px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
    font-weight: bold;
    text-align:right;

}




ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active, 
ul#navmenu a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active { 
  background-color : #494036; /* Color of selected page bar */
  color : #FFFFFF; /* Color of selected page text */

}


ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active { 
  background-color : #494036; /* Color of bar on rollover */
  color : #FFFFFF; /* Color of text on rollover */

Code (markup):

Here's the menu code in the html page:

<div id="header">
<ul id="navmenu">
<li><a href="http://www.sonscarpenter.com/index2.htm">Home</a></li>
<li><a href="http://www.sonscarpenter.com/AboutUs.htm">About Us</a></li>
<li><a href="http://www.sonscarpenter.com/Gallery1.htm">Galleries</a>
    <ul>
	<li><a href="http://www.sonscarpenter.com/Gallery1.htm">Gallery 1</a></li>
	<li><a href="http://www.sonscarpenter.com/Gallery2.htm">Gallery 2</a></li>
	<li><a href="http://www.sonscarpenter.com/Gallery3.htm">Gallery 3</a></li>
	<li><a href="http://www.sonscarpenter.com/Gallery4.htm">Gallery 4</a></li>
	<li><a href="http://www.sonscarpenter.com/Gallery5.htm">Gallery 5</a></li>
	</ul>
</li>
<li><a href="http://www.sonscarpenter.com/Testimonials.htm">Testimonials</a></li>
<li><a href="http://www.sonscarpenter.com/Contact.htm">Contact Us</a></li>
</ul>
  </div><!--header-->

Code (markup):

Any help/ideas would be greatly appreciated!

 

I created submenu items for a second list item in the menu and noticed that it displayed in the same location as the other submenu. It seems to display the submenu flush left with the horizontal menu. So I am guessing I have something screwy with the html code for the navigation??