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 に答える