Make the drop-down menu's width dynamic - html

Question

My website uses a drop-down menu for the things you can do on the page.
HTML:
<table class="navbar">
<td class="menuNormal geometry" width="135px" onmouseover="menu('exp',this);" onmouseout="menu('col',this);">
<p class="tdesc">
<span lang="hu">Geometria</span>
<span lang="en">Geometry</span>
</p>
<div class="menuNormal dropdown" width="inherit">
<table class="menu" width="inherit">
<tr><td class="menuNormal">
<a href="javascript:geodesc('squa')" class="menuitem">
<span lang="hu">Négyzet</span>
<span lang="en">Square</span>
</a>
</td></tr>
...
</table>
</div>
</td>
</table>
CSS:
table {
padding:0;
margin:0;
}
table.navbar {
background-color: ButtonFace;
font: menu;
}
p.tdesc {
margin: 0;
padding: 0 3px 0 3px;
text-align:center;
font: menu;
}
table.menu{
font-size: 8pt;
margin: 0px;
padding: 0px;
}
td.menuNormal{
padding: 0px;
color: ButtonText;
vertical-align: top;
}
td.menuHover{
padding: 0px;
color: HighlightText;
vertical-align: top;
background-color: Highlight;
}
div.menuNormal{
display: none;
position: static;
}
div.menuHover{
border: 1.5px solid ButtonShadow;
background-color: Menu;
display: inline;
position: absolute;
}
a.menuitem:link{
text-decoration: none;
color: ButtonText;
padding: 2.5px;
border-bottom: 1px solid GrayText;
display: block;
}
a.menuitem:hover{
text-decoration: none;
color: HighlightText;
padding: 2.5px;
background-color: Highlight;
border-bottom: 1px solid GrayText;
display: block;
}
.hover {
border:3px ridge #8CA3FF;
background-color: #C9D4FF;
font-style:normal;
}
Currently, this solution is not the perfect one, since the menu's width is fixed, and when I tried to make it look like a bit more drop-down-ish, it extended the width of the top label when showing the actual options.
I need a method that I could use to make the options appear like an actual drop-down would, and make the label width fit the text that it contains.

Answer 1

If this is something new you are putting together and you have complete control over it and the goal is to make a nice website (not about showing an understanding of CSS) and you have no limitations such as not using an existing library, then I would suggest trying out Twitter Bootstrap and using a fluid container and navigation as a base and then add your own CSS on top for specific design changes if required.