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以进行特定的设计更改。

使下拉菜单的宽度动态化

1 个答案: