1

HTML を使用した純粋な CSS メニュー (これには JavaScript は必要ありません) があります。

<ul id="nav">
    <li>
        <div><a href="#">First Menu</a>
        </div>
        <ul>
            <li><a href="#">First Option</a></li>
            <li><a href="#">Second Option</a></li>
            <li id="subnav"><a href="#">Sub Menu &#8212;>></a>
                <ul>
                    <li><a href="#">First Sub Option</a></li>
                    <li><a href="#">Second Sub Option</a></li>
                    <li><a href="#">Third Sub Option</a></li>
                    <li><a href="#">Fourth Sub Option</a></li>
                </ul>
            </li>
            <li><a href="#">Third Option</a>
            </li>
            <li id="subnav"><a href="#">Second Sub Menu &#8212;>></a>
                <ul>
                    <li><a href="#">Second Sub Menu, First Sub Option</a></li>
                    <li><a href="#">Second Sub Menu, Second Sub Option</a></li>
                </ul>
                <li><a href="#">Fourth Option</a></li>
            </li>
        </ul>
    </li>
    <li>
        <div><a href="#">Second Menu</a>
        </div>
        <ul>
            <li><a href="#">Next First Option</a></li>
            <li><a href="#">Next Second Option</a></li>
        </ul>
     </li>
</ul>

そしてCSS：

#nav, #nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    padding: 0px 1px 0px 1px;
    margin: 0px;
    border: black thin solid;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    font-size: 115%;
    list-style-type: none;
    font-family: sans-serif;
    margin-left: none;
    background-color: #EFAA0D;
    z-index:100;
}
#nav>li {
    float: left;
}
#nav li ul {
    list-style-type: none;
    display: none;
    width:20em;
    position: absolute;
    left: 4px;
    font-weight: normal;
}
#nav li>ul {
    top: auto;
    left: auto;
}
#nav li:hover>ul {
    display: block;
}
#nav li a:hover {
    background-color: #fdca2e;
}
#nav li a:link, #nav li a:visited {
    padding: 0em .25em 0em 0.25em;
    border: black thin solid;
    text-decoration: none;
    display: block;
    left:2px;
}
#nav li>a {
    font-weight: normal;
}
#subnav li a:link, #subnav li a:visited {
    color: #EFAA0D;
    padding: 0em .25em 0em 0.25em;
    border: green thin solid;
    display: block;
    left:2px;
    background-color: black;
}
#subnav li a:hover {
    background-color: #555;
    position: relative;
    left: 1px;
}

フィドルを参照してください: http://jsfiddle.net/sablefoste/wRK9v/7/

私の懸念は、「第 3 のオプション」以降を表示することです。これらのオプションにアクセスしようとすると、「2 番目のオプション」のサブメニューでカバーされます。アクセスする唯一の方法は、パッドの上でマウスを滑らせることです。

これを修正する方法はありますか？

4

3 に答える 3

4

メニューをインデントしているものである、順序付けられていないリスト要素のデフォルトのパディングを残しました。:hoverパディングは、状態に関する要素の一部と見なされます。最初に要素のパディングをゼロにしてULから、インデントしたい量のマージン [-left] を追加します。この場合、以下を追加します (または、マージと言うべきです):

#nav li ul {
    padding: 0;
    margin-left: 40px;
}

デモ: http://jsfiddle.net/wRK9v/8/

于 2013-05-30T17:01:56.507 に答える
1

UL のデフォルトのパディングをオーバーライドしていないため、Fiddle でメニューが左に移動する様子を確認できますが、UL の「外側」の領域にマウスを合わせると、技術的には 3 番目の UL にマウスを合わせたままになります。消えません。

デフォルトのパディングをオーバーライドすると、左側のスペースがなくなりますが、すべての UL 要素が整列され、残りのメニューを表示することはできません。

#nav li > ul {
    top: auto;
    left: auto;
    padding-left: 0;
}

次に左の配置を設定すると、必要なだけ間隔を空けてサブメニューを表示できます。これをすべてのメニューに適用できます。

#nav li > ul {
    top: auto;
    left: 100px;
    padding-left: 0;
}

または、具体的には第 3 レベルのメニューに追加します。

#nav li #subnav > ul {
    padding-left: 0px;
    left: 150px;    
}

フィドルはこちら

于 2013-05-30T17:12:44.010 に答える
0

私はコードですべてを解決したいと思う傾向がありますが、簡単な変更は左側のマージンを増やすことです。

#nav li ul li ul
{
  margin-left: 17.5em;
  margin-top: -1.5em;
}

実際には、サブメニューを 2 番目のメニューのすぐ右側に配置したいと思いますよね? の代わりにハードピクセルを使用するようにインデントを作り直しますems。既に幅を 20em に指定しているので、それを使用してサブメニューをメイン メニューの右側に表示することができます。

フィドル: http://jsfiddle.net/wRK9v/12/

于 2013-05-30T17:01:34.960 に答える