Witam,
edytowałem jakiś skrypt który znalazłem w internecie rozwijanego menu. Przerobiłem go już do formy jaka będzie mi potrzebna ale mam jeden problem. Problem polega na tym że to co się rozwija ma taką samą szerokość jak przycisk, powoduje to to że jak jest długa nazwa w pod menu to powstaje problem

(piętrowy napis ) Proszę o pomoc jak to przerobić ewn jakiś inny skrypt aby to działało jak napisałem . Tutaj macie link dokładnie o co bym chciał uzyskać, oraz kod.
Fotka:
KLIKSkrypt na stronie :
KLIKKod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
.menu { height:39px; }
.menu ul {margin:0px; padding:0px; list-style-type:none ; }
.menu ul li {position:relative ; float: left; }
.menu ul li ul {visibility:hidden; position:absolute; top:39px; }
.menu ul :hover ul {visibility:visible}
.menu a {display:block; line-height:39px; background: #242424; color:white; text-decoration:none; text-indent:10px; padding-right: 10px; font-family:verdana; font-size:10px; }
.menu a:hover {background:#343434;}
<li><a href="" title="">STRONA GŁÓWNA
</a></li> <li><a href="" title="">IDEA
</a></li> <li><a href="" title="">PŁOTY
</a></li> <li><a href="" title="">BALUSTRADY
</a> <li><a href="" title="">BALUSTRADY WEWNĘTRZNE
</a></li> <li><a href="" title="">BALUSTRADY ZEWNĘTRZNE
</a></li> <li><a href="" title="" >AKCESORIA
</a></li> <li><a href="" title="" >KONTAKT
</a> <li><a href="" title="">DANE KONTAKTOWE
</a></li> <li><a href="" title="">LOKALIZACJA
</a></li>
Proszę o pomoc
Pozdrawiam