Making submenus have width at least that of parent - width

Question

I am trying to make a submenu where the items are at least as wide as the parent item unless the text is longer, then I want it to stretch to the text width. I've tried adding a width element but this doesn't seem to stretch the background colour to the width I specify so I'm a little unsure as to how to do this. My menu html is
<ul class="a">
<li>Home</li>
<li>Menu Item 1
<ul class="subMenu">
<li>Submenu Item</li>
</ul>
</li>
<li>Menu Item 2
<ul class="subMenu">
<li>Submenu Item 1</li>
<li>Submenu Item 1</li>
</ul>
</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
and the corresponding css
ul
{
text-align:center;
list-style-type:none;
margin:1em 0px 0px;
padding:0px;
display:block;
z-index:1;
height:1em;
}
li
{
display:inline-block;
float:left;
margin:0px 0px 0px;
position:relative;
}
a
{
cursor: pointer;
text-decoration: none;
padding: .5em 2em .55em;
-webkit-box-shadow: 0 0px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0px 2px rgba(0,0,0,.2);
box-shadow: 0 0px 2px rgba(0,0,0,.2);
color: #000000;
border: solid 1px #0f7a6c;
background: #0f7a6c;
background: -webkit-gradient(linear, left top, left bottom, from(#1b7a6d), to(#53a499));
background: -moz-linear-gradient(top, #1b7a6d, #53a499);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b7a6d', endColorstr='#53a499');
font-weight:bold;
}
a:hover
{
text-decoration: none;
background: #0f7a6c;
background: -webkit-gradient(linear, left top, left bottom, from(#53a499), to(#1b7a6d));
background: -moz-linear-gradient(top, #53a499, #1b7a6d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53a499', endColorstr='#1b7a6d');
}
a:active
{
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#49a397), to(#097a6b));
background: -moz-linear-gradient(top, #49A397, #097a6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#49A397', endColorstr='#097a6b');
}
.subMenu
{
visibility:hidden;
position:absolute;
}
.a li:hover .subMenu
{
visibility:visible;
position:absolute;
opacity:1;
height:1em;
}
.subMenu li
{
float:left;
margin:0px 0px 1em;
position:relative;
}