Прошу совета по оформлению выпадающего меню на CSS

[paulkorotoon]

Привет форумчанам :) .

С HTML и CSS познакомился буквально на днях, поэтому вопрос, наверное, нубский...

Есть меню, содержащее выпадающие подменю.

<ul id="menu">
<li><a class="button color_current" href="index.htm">РЕЗЮМЕ</a></li>
<li><a class="button color" href="./about/biography.htm">БИОГРАФИЯ</a></li>
<li><a class="button color" href="./about/person.htm">ЛИЧНОСТЬ</a></li>
<li><a class="button color">КОНТАКТЫ</a>
<ul id="submenu">
<li><a class="button color" href=mailto:paulkorotoon@yandex.ua title="paulkorotoon@yandex.ua">ПОЧТА</a></li>
<li><a class="button color" href=https://vk.com/paulkorotoon title="vk.com/paulkorotoon">ВКОНТАКТЕ</a></li>
</ul>
</li>
<li><a class="button color">ЗАДАНИЯ</a>
<ul id="submenu">
<li><a class="button color" href="./tasks/js/css.htm">CSS</a></li>
<li><a class="button color" href="./tasks/js/js.htm">JAVASCRIPT</a></li>
<li><a class="button color" href="./tasks/animation/animation.htm">АНИМАЦИЯ</a></li>
</ul>
</li>
</ul>

/*Код меню*/
#menu {
margin: 0px auto;

}
#menu li {
list-style: none;
float: left;
background: white;
position: relative;
}
#menu li ul {
list-style: none;
display: none;
position: absolute;
}
#menu li ul li {
float: none;
width: 100%;
background: white;
align:center;
}
#menu li a {
display: block;

}

#menu li ul li a {
display: block;
text-align:left;
}

#menu li:hover ul, #menu li.jshover ul {
display: block;
}
#menu li:hover, #menu li.jshover {
background: white;
}

#submenu {
border: 1px solid black;
border-top: 0px;
border-radius: 0px 0px 2px 2px;
box-shadow: 1px 1px 1px gray;

}

/*Код кнопки button*/
.button {
width: 100px/100%;
color: black;
display: inline;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14pt/100% "Trebuchet MS", serif;
padding: .4em .5em;
text-shadow: 0px 1px 1px rgba(0,0,0,.3);
}


Выглядит это дело вот так:
http://5.firepic.org/5/thumbs/2013-05/04/j0wauvh3oa51.png (http://firepic.org/?v=5.2013-05-04_j0wauvh3oa51.png)
http://5.firepic.org/5/thumbs/2013-05/04/n49vt6quip25.png (http://firepic.org/?v=5.2013-05-04_n49vt6quip25.png)

В чем вопрос: хочется сделать, чтобы выпадающие пункты были такой же ширины, как и родительские (учитывая, что ширина родительских кнопок не является фиксированной). Баловался с width: inherit и font-size: 100% в css-коде #menu li ul li a, ерунда получается... Или, может быть, можно центрировать выпадающие пункты относительно родительского? Буду благодарен, если кто-нибудь что-то подскажет :) .