html - 使下拉菜单的宽度动态

Question

My website为您可以在页面上执行的操作使用下拉菜单。

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;
}

目前，这个解决方案并不完美，因为菜单的宽度是固定的，当我试图让它看起来更像下拉菜单时，它在显示实际内容时扩展了顶部标签的宽度选项。

我需要一种方法，使选项看起来像实际的下拉菜单，并使标签宽度适合它包含的文本。

Answer 1

如果这是您正在组合的新东西并且您可以完全控制它并且目标是制作一个漂亮的网站(而不是展示对 CSS 的理解)并且您没有诸如不 使用现有的库，那么我建议尝试 Twitter Bootstrap并使用流体容器和导航作为基础，然后根据需要在顶部添加您自己的 CSS 以进行特定的设计更改。