0

我的网站使用下拉菜单来显示您可以在页面上执行的操作。

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

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

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

4

1 回答 1

2

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

于 2012-12-20T02:24:07.557 回答