width - サブメニューの幅を少なくとも親の幅にする

Question

テキストが長くない限り、アイテムが親アイテムと少なくとも同じ幅であるサブメニューを作成しようとしています。その後、テキスト幅に合わせて伸ばします。幅要素を追加しようとしましたが、指定した幅に背景色が引き伸ばされないように見えるため、これを行う方法が少しわかりません。私のメニューhtmlは

<ul class="a">
<li><a href="index.php">Home</a></li>
<li><a href="/">Menu Item 1</a>
    <ul class="subMenu">
        <li><a href="/">Submenu Item</a></li>
    </ul>
    </li>
<li><a href="/">Menu Item 2</a>
    <ul class="subMenu">
        <li><a href="/">Submenu Item 1</a></li>
        <li><a href="/">Submenu Item 1</a></li>
    </ul>
    </li>
<li><a href="/">Menu Item 3</a></li>
<li><a href="/">Menu Item 4</a></li>
</ul>

および対応する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;
}